指令：v-xxx
用于動態(tài)操作某些數(shù)據(jù)
v-bind:
image.png
v-html:
image.png
v-if: // v-else:條件渲染(不需要頻繁切換且安全性較高的界面)
image.png
v-show:條件渲染(需要循環(huán)渲染及權(quán)限或安全性不需要很高的界面)
image.png
v-for:循環(huán)迭代顯示
image.png
image.png
對于對象
image.png
image.png
image.png
image.png
對于迭代（循環(huán)輸出）
image.png
image.png
v-cloak:配合style使用：解決預(yù)加載顯示問題
image.png
v-model:數(shù)據(jù)雙向綁定
例一：點擊單選按鈕打印出對應(yīng)需要輸出的內(nèi)容
<body>
<div id="app">
<!-- v-model直接實現(xiàn)了雙向綁定 -->
<label><input type="radio" v-model="gender" value="M">男</label>
<label><input type="radio" v-model="gender" value="F">女</label>
<label><input type="radio" v-model="gender" value="U">人妖</label>
{{gender}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
gender: ''
}
})
</script>
</body>
例二：選擇復(fù)選框打印出選中所有選項所需輸出內(nèi)容
<body>
<div id="app">
<!-- v-model直接實現(xiàn)了雙向綁定 -->
<label><input type="checkbox" v-model="hobby" value="M">男</label>
<label><input type="checkbox" v-model="hobby" value="F">女</label>
<label><input type="checkbox" v-model="hobby" value="U">人妖</label>
{{hobby}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
// 篩選框的數(shù)據(jù)格式應(yīng)該是一個數(shù)組
hobby: []
}
})
</script>
</body>
例三：關(guān)于v-model修飾符
<body>
<div id="app">
<!-- model的lazy修飾符，在input的時候不會更新捆毫，只有在change的時候才會更新 -->
<input
type="text"
v-model.lazy="inputValue"
>
{{inputValue}}
<!-- number修飾符晒衩，會嘗試去把輸入轉(zhuǎn)化為數(shù)字寄猩， 如果 轉(zhuǎn)換失敗巩剖，保留原值, 這個檢驗不靠譜，所以我們還是不要相信用戶的輸入 -->
<!-- 當(dāng)輸入值第一個字符或默認(rèn)值為數(shù)字時林说，才會驗證其后面輸入是否為數(shù)字 -->
<input
v-model.number="age"
>
age: {{age}}
<!-- 自動過濾用戶輸入的首尾空白字符 -->
<input
v-model.trim="test"
>
trim: {{test}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
inputValue: '',
age: 12,
test: ''
}
})
</script>
</body>
