Vue基础：数据绑定

模板语法

• 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/