从Vue2到Vue3，v-model的变化

2023-10-04 05:07:15

Vue3中v-model的变化

在Vue2中，v-model指令可以很方便地实现表单元素和数据的双向绑定。而在Vue3中，v-model指令的用法有所变化，它不再支持直接在表单元素上使用，而是需要配合form组件一起使用。

<template>
  <form @submit.prevent="onSubmit">
    <input v-model="name">
    <input type="checkbox" v-model="agree">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      agree: false
    }
  },
  methods: {
    onSubmit() {
      console.log(this.name, this.agree)
    }
  }
}
</script>

在这个例子中，v-model指令被用在了input元素和checkbox元素上。当用户在input元素中输入内容或在checkbox元素上打勾时，对应的data属性的值也会随之改变。当用户提交表单时，onSubmit方法会被调用，此时就可以在控制台中看到用户输入的内容和勾选的复选框。

v-model与单选框、复选框的结合方式

在Vue2中，v-model指令可以很方便地实现单选框和复选框的双向绑定。而在Vue3中，v-model指令不再支持直接在单选框和复选框上使用，而是需要配合form组件一起使用。

<template>
  <form @submit.prevent="onSubmit">
    <label>
      <input type="radio" v-model="gender" value="male">
      男
    </label>
    <label>
      <input type="radio" v-model="gender" value="female">
      女
    </label>
    <label>
      <input type="checkbox" v-model="hobby" value="reading">
      阅读
    </label>
    <label>
      <input type="checkbox" v-model="hobby" value="music">
      音乐
    </label>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      gender: '',
      hobby: []
    }
  },
  methods: {
    onSubmit() {
      console.log(this.gender, this.hobby)
    }
  }
}
</script>

在这个例子中，v-model指令被用在了radio元素和checkbox元素上。当用户选择不同的单选框或复选框时，对应的data属性的值也会随之改变。当用户提交表单时，onSubmit方法会被调用，此时就可以在控制台中看到用户选择的内容。

在Vue3中使用computed和watch来实现双向数据绑定

在Vue3中，除了可以使用v-model指令来实现双向数据绑定外，还可以使用computed和watch来实现双向数据绑定。

<template>
  <div>
    <input v-model="name">
    <p>你的名字是：{{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  computed: {
    reversedName() {
      return this.name.split('').reverse().join('')
    }
  },
  watch: {
    reversedName(newValue, oldValue) {
      this.name = newValue.split('').reverse().join('')
    }
  }
}
</script>