v-html:以html的形式解析
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <h2 v-html=‘url‘></h2> </div> <script src="vue.js" type="text/javascript"></script> <script> app=new Vue({ el:"#app", data:{ url:‘<a href="http://www.baidu.com">baidu</a>‘
}, }) </script> </body> </html>
v-text:和mustache类似,但是它会覆掉标签之间的内容,使用起来并不是很灵活,没有mustache常用
v-pre和<pre></pre>标签一样,将标签之间的内容原封不动的展示出来
v-cloak防止闪动
v-bind解析属性,动态的绑定变量。服务器请求过来的数据、图片等,一般要在data中进行一个中转,而不是直接在div中显示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!-- 给冒号后面的属性赋值 --> <img v-bind:src="imgurl" alt=‘‘> <h1><a v-bind:href="aHref">baidu</a></h1> <!--语法糖写法 --> <img :src="imgurl" alt=‘‘> <h1><a :href="aHref">baidu</a></h1> </div> <script src="vue.js" type="text/javascript"></script> <script> app=new Vue({ el:"#app", data:{ message:"hello", imgurl:‘https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png‘, aHref:‘https:www.baidu.com‘ }, }) </script> </body> </html>
原文:https://www.cnblogs.com/yizhiran/p/12256526.html