6.v-for 指令
<div id="app">
<div v-for="(item, index) in list">
{{ index }}--{{ item }}
</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
list: ['Tom', 'John', 'Lisa']
}
})
</script>
效果圖.png
7.v-bind 指令
用于動態綁定 DOM 元素的屬性,比較常見的比如:<a>標簽的 href 屬性,<img/>標簽的 src 屬性。
<div id="app">
<a v-bind:href="link">百度首頁</a>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
link: 'http://www.baidu.com'
}
})
</script>
用 v-bind 指令來修飾 href 屬性,表明它的值是一個動態的值,對應的則是 data 中的 link 的值:http://www.baidu.com
效果圖.png
8.v-on 指令
v-on 指令相當于綁定事件的監聽器,綁定的事件觸發了,可以指定事件的處理函數。
<div id="app">
<button v-on:click="say">點擊</button>
</div>
<script>
let app = new Vue({
el: '#app',
methods: {
say() {
console.log('Hello World!')
}
}
})
</script>
效果圖.png
9.v-model 指令
這是一個最重要最常用的指令,一般用在表單輸入,它幫助我們輕易地實現表單控件和數據的雙向綁定,相對以前的手動更新 DOM,簡直就是開發者的福音,下面我們來看看它的用法:
<div id="app">
<input v-mode="msg" type="text">
<p>你輸入:{{ msg }}</p>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
msg: ''
}
})
</script>
只要給 input 控件添加 v-model 指令,并指定關聯的數據 msg,我們就可以輕松把用戶輸入的內容綁定在 msg 上。我們把 msg 的內容顯示出來,看是不是跟用戶輸入的內容是同步更新的:
效果圖.gif
10.v-once 指令
它的特定是只渲染一次,后面元素再更新變化,都不會重新渲染。
<div id="app">
<input v-model="msg" type="text">
<p v-once>你輸入:{{ msg }}</p>
</div>
<script>
let app = new Vue({
el: "#app",
data:{
msg: 'hello,公眾號的同學們'
}
});
</script>
效果圖.gif