双向绑定

v-model 实质上是语法糖，对于输入框来说，v-model是value属性和input事件的简写形式

自定义组件如果也想使用 v-model 参考官网文档

v-model文档

<template>
  <input v-model="message1" />
  <span>{{ message1 }}</span>
  <input :value="message2" @input="handleInput" />
  <span>{{ message2 }}</span>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data: function () {
    return {
      message1: "message1",
      message2: "message2",
    };
  },
  methods: {
    handleInput: function (e) {
      this.message2 = e.target.value;
    },
  },
};
</script>