1.普通插值表达式插入数据
<body> <div id="app"> <div>{{text1}}</div> <div>{{text2}}</div> </div> </body> <script> new Vue({ el:"#app", data:{ text1:"插入值一", text2:"插入值二" } }) </script>
2.文本指令
1.v-text
v-text就相当于Dom中的innerText
<body> <div id="app"> <div v-text="text1"></div> <div v-text="text2"></div> <div style="color: purple;">{{text1}}</div> <div style="font-weight: 800;">{{text2}}</div> </div> </body> <script> new Vue({ el:"#app", data:{ text1:"插入值一", text2:"插入值二" } }) </script>
2.v-html
v-html就相当于Dom中的innerHTML
<body> <div id="app"> <div v-html="html1"></div> <div v-html="html2"></div> <div>{{html1}}</div> <div>{{html2}}</div> </div> </body> <script> new Vue({ el:"#app", data:{ html1:"666666", html2:"888888" } }) </script>
3.v-pre
加上v-pre属性的话就会被识别为文本,而不是js表达式
<body> <div id="app"> <div v-pre=>{{pre1}}</div> <div v-pre=>{{pre2}}</div> <div>{{pre1}}</div> <div>{{pre2}}</div> </div> </body> <script> new Vue({ el:"#app", data:{ pre1:"99999", pre2:"77777" } }) </script>
4.v-bind
v-bind就是给所有标签绑定js变量
<body> <div id="app"> <div>{{statuses[1].user.name}}</div> <img v-bind:src="statuses[9].user.profile_image_url"> <div>{{statuses[1].text}}</div> <div>{{statuses[1].created_at}}</div> <img :src="statuses[9].user.profile_image_url" alt="">
//可以用":"来代替v-bind: </div>
//这些都是obj对象的属性中的值 </body> <script> console.log(obj) new Vue({ el:"#app", data:obj }) </script>
标签:el,Vue,app,基础,text2,指令,new,data From: https://www.cnblogs.com/forever-ljf/p/16637691.html