Vue-經常使用指令(下)

• Vue數組:

updateData(){
    // 從數組末尾添加
    this.names.push('why','zs')
    // 刪除並返回數組最後的一個元素
    this.names.pop()
    // 向數組的開頭添加一個或更多元素，並返回新的長度
    this.names.unshift('why','zs')
    //把數組的第一個元素從其中刪除，並返回第一個元素的值。
    this.names.shift()
    // 向/從數組中添加/刪除項目，而後返回被刪除的項目。
    this.names.splice(2)
    // 對數組的元素進行排序
    this.names.sort()
    // 用於顛倒數組中元素的順序。
    this.names.reverse()
    // 一下沒法出發vue的自動更新
    this.name[index] = 'value'
    this.names.length=length
    // 下邊着中set能夠讓vue自動更新數組變化
    Vue.set(this.names,1,'kobe')
    filter() //建立一個新的數組，新數組中的元素是經過檢查指定數組中符合條件的全部元素。
    concat() //用於鏈接兩個或多個數組。
    slice() //可從已有的數組中返回選定的元素。
}

• v-model

該指令用來實現表單元素和數據的雙向綁定

nv-model實際上是一個語法糖，它的背後本質上是包含兩個操做：

1.v-bind綁定一個value屬性

2.v-on指令給當前元素綁定input事件

也就是說下面的代碼：等同於下面的代碼：

<input type="text" v-model="message">
等同於
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

v-model和各類表單綁定案例

<div id="app">
      <!--name 屬性具備互斥性, 即選擇男 ,女的選項就不會被選 ,  v-model具備和name同樣的互斥性,因此能夠不用寫name-->
      <input type="radio" v-model="sex" value="男" />男
      <input type="radio" v-model="sex" value="女" />女 
      您選擇的性別是: {{sex}}

      <label for="hobbies">
        <input type="checkbox" v-model="hobbies" value="籃球" />籃球 
        <input type="checkbox" v-model="hobbies" value="乒乓球" />乒乓球
        <input type="checkbox" v-model="hobbies" value="檯球" />檯球
      </label>
      您選擇的愛好是: {{hobbies}}

      <select v-model="fruit">
        <option value="香蕉">香蕉</option>
        <option value="蘋果">蘋果</option>
        <option value="橘子">橘子</option>
        <option value="菠蘿">菠蘿</option>
      </select>
      您選擇的水果是: {{fruit}}

      <!--multiple 多選-->
      <select v-model="fruits" multiple>
        <option value="香蕉">香蕉</option>
        <option value="蘋果">蘋果</option>
        <option value="橘子">橘子</option>
        <option value="菠蘿">菠蘿</option>
      </select>

      您選擇的水果是: {{fruits}}
    </div>
    <script src="vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          sex: '男',
          hobbies: [],
          fruit: '',
          fruits: '',
        },
      });
    </script>

修飾符

<!-- 懶加載
    v-model默認是在input事件中同步輸入框的數據的。
    也就是說，一旦有數據發生改變對應的data中的數據就會自動發生改變。
    lazy修飾符能夠讓數據在失去焦點或者回車時纔會更新
        -->
     <input type="text" v-model.lazy="message"></input>
    <!-- 默認的狀況下是字符串, v-model.number只能接受數字 -->
     <input type="number" v-model.number="message"></input>
    {{typeof message}}  <!--typeof value 會輸出 value的類型-->
        <!-- 去除空格 -->
    <input type="text" v-model.trim="message"></input>