1.插值表達式 {{變量}} 例如:
<p id="app">{{data}}</p>
<script>
new Vue({
el:"#app",
data:{
data:"顯示的數據信息"
}
});
</script>
2.v-cloak 用於處理網絡延遲造成插值表達式渲染出現{{data}}的情況.例如:
<style>
[v-clocak]{
display:none;
}
</style>
<p v-clocak>{{data}}</p>
<script>
new Vue({
el:"#app",
data:{
data:"顯示的數據信息"
}
});
</script>
3.v-text 用於顯示文本信息。例如:
<p id="app" v-text="data"></p>
<script>
new Vue({
el:"#app",
data:{
data:"顯示的數據信息"
}
});
ps:v-text和{{變量}}插值表達式的區別在於 插值表達式可以擴展或者拼接新的字符串,而v-text只能是固定的內容 無法在標籤內新增字符串等信息
4.v-html 可以解析html的標籤字符串。例如:
<p id="app" v-html="data"></p>
<script>
new Vue({
el:"#app",
data:{
data:"<a>顯示的數據信息</a>"
}
});
ps:如果使用v-text會將a標籤顯示出來,而使用v-html則會自動解析html的標籤元素
5.v-bind 可以綁定標籤數據 例如:
<input v-bind:value="data" />
<script>
new Vue({
el:"#app",
data:{
data:"顯示的數據信息"
}
});
ps:只要data的數據發生變化 input裏面的數據就會自動隨着變化而變化 我們不需要關心頁面的渲染問題