APP
1.普通插值表達式插入數(shù)據
<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>
?
本文摘自 ：https://www.cnblogs.com/
