12 vue 指令 v-model

6/30/2021 vue

表单数据的双向绑定

API — v-model (opens new window)

表单输入绑定 — Vue.js (opens new window)

自定义事件 — Vue.js (opens new window)

<input v-model="message">
<p>Message is: {{ message }}</p>

# 实现原理

单向绑定 v-bind:value & 事件监听 v-on:input

<input :value="message" @input="valueChange" >
<p>Message is: {{ message }}</p>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      valueChange(event) {
        this.message = event.target.value;
      }
    }
  })
</script>

# v-for 与 select

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

# 修饰符

.lazy - 取代 input 监听 change 事件 .number - 输入字符串转为有效的数字 .trim - 输入首尾空格过滤

更新时间: Wednesday, June 30, 2021 20:34