Vue.js的v-指令

1、v-if ：判斷真假

     v-else：給 v-if 添加一個 "else" 塊

     v-else-if：用作 v-if 的 else-if 塊。可以鏈式的多次使用

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

2、v-show：與v-if類似，是判斷語句

3、v-html : 指令用於輸出 html 代碼

4、v-model ：表單控件綁定

5、v-bind：

1）綁定參數 

​<div id="app">
    <a v-bind:href="url">網址</a><span>歡迎訪問</span>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'https://blog.csdn.net/clmmei_123'
  }
})
</script>

​

2）判斷

（結合v-model）

<div id="app">
  <label for="r1">修改顏色</label><input type="checkbox" v-model="checkBox" id="r1">
  <br><br>
  <div v-bind:class="{'class1': checkBox}">
    directiva v-bind:class
  </div>
</div>
	
<script>
new Vue({
	el: '#app',
  data:{
  	checkBox: false
  }
});
</script>

注意：v-bind有縮寫的表示法，更爲簡潔

<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>

 

6、v-on： 指令，它用於監聽 DOM 事件

例子：反轉字符串

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反轉字符串</button>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

注意：v-on也有其縮寫語法

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>

7、v-for：循環指令

   1) 可以綁定數據到數組來渲染一個列表

 <ol>
    <li v-for="數組元素迭代的別名 in 定義的源數組">
      {{ 數組元素迭代的別名 . 屬性 }}
    </li>
  </ol>

   2) 可以通過一個對象的屬性來迭代數據

<ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>

v-for 也可以提供第二個參數爲鍵名：

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

第三個參數爲索引：

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>