模板語法

• v-once 指令 執行一次性地插值，當資料改變時，插值處的內容不會更新。
• 大括號會將資料解釋為純文字，而非 HTML 。為了輸出真正的 HTML ，你需要使用 v-html 指令

• 使用javascript表示式，只能包含單個表示式

  {{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}
  <div v-bind:id="'list-' + id"></div>

  注意：只能訪問全域性變數，如Math、Date等；不應該在模板表示式中試圖訪問使用者定義的全域性變數。

Class 與 Style 繫結

繫結HTML Class

• 物件語法

  <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
  <script>
  data: {
  isActive: true,
  hasError: false
  }
  </script>
  
  <!-- 可以直接繫結資料裡的一個物件 -->
  <div v-bind:class="classObject"></div>
  <script
   
  >
  data: {
  classObject: {
    active: true,
    'text-danger': false
  }
  }
  </script>
  
  <!-- 配合計算屬性使用 -->
  <div v-bind:class="classObject"></div>
  <script>
  data: {
  isActive: true,
  error: null
  },
  computed: {
  classObject: function () {
    return {
      active: this.isActive && !this
   
  .error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
  }
  </script>

• 陣列語法

  <div v-bind:class="[activeClass, errorClass]"></div>
  
  <!-- 使用三元表示式 -->
  <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
  
  <!-- 陣列語法中使用物件語法 -->
  <div v-bind:class="[{ active: isActive }, errorClass]"></div>

繫結內聯樣式

• 物件語法

  <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  
  <!-- 直接繫結物件 -->
  <div v-bind:style="styleObject"></div>

• 陣列語法

  <div v-bind:style="[baseStyles, overridingStyles]"></div>

• 多重值

  <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

  這會渲染陣列中最後一個被瀏覽器支援的值。在這個例子中，如果瀏覽器支援不帶瀏覽器字首的 flexbox，那麼渲染結果會是 display: flex。

注意：當v-bind:style使用需要特定字首的CSS屬性時，如transform，Vue.js會自動偵測並新增相應的字首。

表單輸入繫結

上述已經提到<input v-model="message">實現所謂的雙向，不過是<input v-bind:value='message' v-on:input="message = arguments[0]"的語法糖。v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值。因為它會選擇 Vue 例項資料來作為具體的值。

複選框

多個勾選框，繫結到同一個陣列：

<div id='example'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <p>Checked names: {{ checkedNames }}</p>
</div>
<script>
new Vue({
  el: '#example',
  data: {
    checkedNames: []
  }
})
</script>

單選按鈕

<div id="example">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <p>Picked: {{ picked }}</p>
</div>
<script>
new Vue({
  el: '#example',
  data: {
    picked: ''
  }
})
</script>

選擇列表

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">請選擇</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

如果 v-model 表達初始的值不匹配任何的選項，<select> 元素就會以”未選中”的狀態渲染。在 iOS 中，這會使使用者無法選擇第一個選項，因為這樣的情況下，iOS 不會引發 change 事件。因此，像以上提供 disabled 選項是建議的做法。

值繫結

對於單選按鈕，勾選框及選擇列表選項， v-model 繫結的 value 通常是靜態字串（對於勾選框是邏輯值）：但是有時我們想繫結 value 到 Vue 例項的一個動態屬性上，這時可以用 v-bind 實現，並且這個屬性的值可以不是字串。

<!-- 複選框 -->
<input type="checkbox" v-model="toggle" :true-value="trueVal" :false-value="falseVal">
<!-- 單選框 -->
<input type="radio" v-model="pick" v-bind:value="value">
<!-- 列表 -->
<select v-model="selected">
  <!-- 內聯物件字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

<script>
  const app = new Vue({
    el: '#app',
    data() {
      return {
        // 選中為'yes' 未選中為'false'
        toggle: '',
        trueVal: 'yes',
        falseVal: 'no',
        // 選中為'yes' 
        pick: '',
        value: 'yes',
        // 為物件
        selected: '',
      }
    }
  })
</script>

技巧： select元件都會提供label和value兩個值，供使用者對展示和賦值進行分別設定，這裡可以對value賦值整個物件，便於後續操作，單展示上不受任何影響！這在一些獲取選中值做後續條件的時候很有用。

<el-select v-model="value" multiple placeholder="請選擇">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item">
  </el-option>
</el-select>

修飾符

• .lazy：新增該修飾符，從而轉變為在 change 事件中同步，而非input事件！請檢視： change和input區別
• .number：將使用者的輸入值轉為 Number 型別
• .trim：自動過濾使用者輸入的首尾空格

<div id="app">
  <!-- v-bind -->
  <my-component value="123"></my-component> 
  <my-component :value="123"></my-component>
  <!-- v-model.lazy -->
  <input type="text" v-model.lazy="value2"><span>{{value2}}</span>
  <!-- v-model.number -->
  <input type="text" v-model="value3"><span>{{typeof value3}}</span>
  <input type="text" v-model.number="value4"><span>{{typeof value4}}</span>
</div>

說明：第一個<my-component>元件的value值為string型別；第二個<my-component>元件的value值為number型別；value2添加了.lazy修飾符，在使用者輸入值得過程中（input事件）並不會發生改變，失去焦點（change）才觸發改變；value3，value4初始型別取決於vue例項中data值得型別，但在使用者輸入過程中，value4會做型別轉換，轉換為Number型別。
完整示例參考地址：https://jsfiddle.net/381510688/7oe7LLtm/