08、實戰前必須掌握的10個指令(下)

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
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。