表单，v-model 双向绑定

官方文档

表单

双向绑定：data 中的属性值变了，input 里的值也变；input 里输入的值改变了，data 里对于的属性值也变
<form> 里面包含 <button>，则按回车键相当于点击了 button

<template>
  <div id="app">
    <form>
      <div>
        <input type="text" v-model="message" />
        <br /><br />
        <button @click.prevent="message = 1">set message to 1</button>
        <p>Message is: {{ message }}</p>
      </div>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "",
    };
  },
};
</script>
<style lang="scss">
</style>

修饰符

.lazy

v-model 默认在每次 input 事件触发后将输入框的值与数据进行同步， lazy 修饰符改为在 change 事件后进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

.number

将用户输入的值转换为 number 类型，相当于 parseFloat

<input v-model.number="age" type="number">

.trim

删除用户输入值首位的空白字符

<input v-model.trim="msg">

v-model 双向绑定原理

v-model 实际上是 v-bind:value 和 v-on:input 的语法糖
data 属性值改变 -> input 内容改变：v-bind:value
input 内容改变 -> data 属性值改变：v-on:input

<!-- 两者等价 -->
<input type="text"  v-model="message" />
<input type="text"  :value="message" @input="message = $event.target.value" />

手写 ，与 .sync 原理一样
MyInput.vue:

<template>
  <div>
    <input :value="value" @input="onInput" />
  </div>
</template>
<script>
export default {
  name: "MyInput",
  props: {
    value: "",
  },
  methods: {
    onInput(e) {
      const event = e.target.value;
      this.$emit("input", event);
    },
  },
};
</script>
<style></style>

使用：

<MyInput type="text" v-model="message" />
<MyInput :value="message" @input="message = $event" />

Ant Design of Vue

文档