vue的插值操作
Posted 高不高
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue的插值操作相关的知识,希望对你有一定的参考价值。
mustache语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"/> </head> <div id="app"> <h2>{{message}}</h2> <h2>{{message}} ,sku</h2> <h2>{{firname+lasname}}</h2> <h2>{{firname+\' \'+lasname}}</h2> <h2>{{firname}} {{lasname}}</h2> <h2>{{2*count}}</h2> </div> <script> const vm = new Vue({ el : \'#app\', data:{ message:\'hello\', firname:\'john\', lasname:\'bry\', count:100 } }) </script> </body> </html>
v-once
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"/> </head> <div id="app"> <h2>{{message}}</h2> <h2>{{message}} ,sku</h2> <h2>{{firname+lasname}}</h2> <h2>{{firname+\' \'+lasname}}</h2> <h2>{{firname}} {{lasname}}</h2> <h2>{{2*count}}</h2> </div> <script> const vm = new Vue({ el : \'#app\', data:{ message:\'hello\', firname:\'john\', lasname:\'bry\', count:100 } }) </script> </body> </html>
v-html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="../vue.js"></script> <div id="app"> <h2>{{url}}</h2> <h2 v-html="url"></h2> </div> <script> const vm = new Vue({ el : \'#app\', data:{ message:\'hello\', url:"<a href=\'https://www.baidu.com\'>百度</a>", } }) </script> </body> </html>
v-text
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="../vue.js"></script> <div id="app"> <h2>{{message}}</h2> <h2 v-text="message">jhvj</h2> </div> <script> const vm = new Vue({ el : \'#app\', data:{ message:\'hello\', } }) </script> </body> </html>
v-pre
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="../vue.js"></script> <div id="app"> <h2>{{message}}</h2> <h2 v-text="message">jhvj</h2> </div> <script> const vm = new Vue({ el : \'#app\', data:{ message:\'hello\', } }) </script> </body> </html>
v-clock
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [v-cloak]{ display: none; } </style> </head> <body> <script src="../vue.js"></script> <div id="app" v-cloak> <h2>{{message}}</h2> </div> <script> //vue解析之前有v-cloak //vue解析之后无v-cloak setTimeout(function () { const vm = new Vue({ el : \'#app\', data:{ message:\'hello\', } }) },1000) </script> </body> </html>
以上是关于vue的插值操作的主要内容,如果未能解决你的问题,请参考以下文章