v-text
v-text類似元素的innerText屬性，它跟{{}}一樣，用于數(shù)據(jù)綁定：
<div id="app">
<!-- 綁定data中msg數(shù)據(jù)，將其渲染在頁面上-->
<h3 v-text="msg"></h3>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"hello v-text"
}
})
</script>
跟{{}}一樣，可以使用JavaScript邏輯運(yùn)算，變量拼接等
<h3 v-text="msg + '111'"></h3>
<h3 v-text="msg > 1 ? '大于' : '小于'"></h3>
<h3 v-text="msg + msg"></h3>
添加了v-text，標(biāo)簽中的內(nèi)容會(huì)被覆蓋，頁面上展示的是綁定的數(shù)據(jù)
<p v-text="msg">我會(huì)被覆蓋</p>
v-html
v-html和v-text功能大同小異，唯一的區(qū)別就是對(duì)于標(biāo)簽的解析方面
<div id="app">
<h3 style="color: red">v-text：</h3>
<span v-text="msg"></span>
<h3 style="color: red">v-html：</h3>
<span v-html="msg"></span>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"<h1>v-text和v-html的區(qū)別</h1>"
}
})
</script>
頁面展示結(jié)果：
text-html.png
v-once
執(zhí)行一次性地插值，當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)更新，v-once所定義的元素或組件只會(huì)渲染一次，首次渲染后，不再隨著數(shù)據(jù)的改變而重新渲染。也就是說使用v-once，該塊都將被視為靜態(tài)內(nèi)容。
<div id = "com">
<h1> {{c}} </h1>
<h4 v-once> {{c}} </h4>
<input type="text" v-model="c">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
var a = new Vue({
el: '#com',
data:{
c:'Hello vue'
}
});
</script>
使用了v-once只執(zhí)行一次插值：
v-once.gif
v-pre
跳過這個(gè)元素和它的子元素的編譯過程。一些靜態(tài)的內(nèi)容不需要編輯加這個(gè)指令可以加快編輯
<div id="app">
<h3 style="color: red">不使用v-pre：</h3>
<span>{{msg}}</span>
<h3 style="color: red">使用v-pre：</h3>
<span v-pre>{{msg}}</span>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"HELLO VUE!"
}
})
</script>
展示：
v-pre.png
v-cloak
當(dāng)網(wǎng)絡(luò)較慢，網(wǎng)頁還在加載 Vue.js ，而導(dǎo)致 Vue 來不及渲染，這時(shí)頁面就會(huì)顯示出 Vue 源代碼。造成閃爍的效果
css：
[v-cloak]{
display: none;
}
<div id="app">
<h3 style="color: red">閃爍展示源碼</h3>
<span>{{msg}}</span>
<h3 style="color: red">使用cloak：</h3>
<span v-cloak>{{msg}}</span>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"HELLO VUE!"
}
})
</script>
展示效果
v-cloak2.gif
v-model
使用v-model可以實(shí)現(xiàn)標(biāo)簽數(shù)據(jù)的雙向綁定，它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素。
文本框
如下div中加入<p>{{ test}}</p>獲取input數(shù)據(jù)，然后去修改input中數(shù)據(jù)會(huì)發(fā)現(xiàn)<p></p>中數(shù)據(jù)隨之改變。
<div id="app">
<input type="text" v-model="msg" />
<p>{{msg}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
msg:"好好學(xué)習(xí)"
}
})
</script>
效果：
v-model1.gif
復(fù)選框
選中或取消，值為true或false
<div id="app">
<input type="checkbox" v-model="msg" />學(xué)習(xí)
<p>{{msg}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
msg:""
}
})
</script>
效果：
v-model2.gif
綁定的數(shù)據(jù)為空數(shù)組時(shí)，選中填null
<div id="app">
<input type="checkbox" v-model="msg" />學(xué)習(xí)
<p>{{msg}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
msg:[]
}
})
</script>
效果：
v-model3.gif
因?yàn)閺?fù)選框中，并沒有vlaue值，加上vlaue，選中則填充到數(shù)組中
<div id="app">
<input type="checkbox" v-model="msg" value="學(xué)習(xí)"/>學(xué)習(xí)
<input type="checkbox" v-model="msg" value="游戲"/>游戲
<p>{{msg}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
msg:[]
}
})
</script>
效果:
v-model4.gif
單選框
當(dāng)單選框的vlaue值跟綁定的數(shù)據(jù)相同的，那么默認(rèn)就是選上的狀態(tài)：
<div id="app">
<label for="man">
<input type="radio" v-model="sex" id="man" value="1">男
</label>
<label for="wom">
<input type="radio" v-model="sex" id="man" value="1">女
</label>
<p>性別：{{sex}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
sex:'1'
}
})
</script>
效果：
v-model4.png
當(dāng)value值和綁定數(shù)據(jù)值不一致的時(shí)候，才不是選上的狀態(tài)
<div id="app">
<label for="man">
<input type="radio" v-model="sex" id="man" value="男">男
</label>
<label for="wom">
<input type="radio" v-model="sex" id="man" value="女">女
</label>
<p>性別：{{sex}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
sex:''
}
})
</script>
效果：
v-model5.gif
下拉框
<div id="app">
<select v-model="selected">
<option value="星期天">星期天</option>
<option value="我還在">我還在</option>
<option value="學(xué)習(xí)">學(xué)習(xí)</option>
</select>
<p>選中：{{selected}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
selected:''
}
})
</script>
效果：
v-model6.gif
表單輸入綁定修飾符
lazy延遲修飾符
<div id="app">
<input type="text" v-model.lazy="msg">
<p>輸入：{{msg}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
msg:''
}
})
</script>
效果：
v-model.lazy.gif
number數(shù)字修飾符
這通常很有用，因?yàn)榧词乖?type=“number” 時(shí)，HTML 輸入元素的值也總會(huì)返回字符串。如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型，可以給 v-model 添加 number 修飾符
<div id="app">
<input type="text" v-model.number="msg">
<p>輸入：{{typeof(msg)}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
msg:''
}
})
</script>
效果：
v-model.number.gif
過濾空白修飾符
<div id="app">
<input type="text" v-model.trim="msg">
<input type="text" v-model="msg2">
<p>輸入：{{msg}}</p>
<p>輸入：{{msg2}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
var vm= new Vue({
el:"#app",
data:{
msg:'',
msg2:''
}
})
</script>
效果
trim.png
