vue3中v-model和:model

在Vue3中，v-model和:model是用来绑定表单元素的指令。它们的作用是将表单元素的值与Vue实例的数据双向绑定，以便在用户操作表单元素时，能够自动更新Vue实例中的数据，并在数据更新时自动更新表单元素的值。

v-model是Vue2.x版本中常用的指令，用于简化input、select、textarea等表单元素的双向数据绑定。而在Vue3.x版本中，为了更好地支持TypeScript和编辑器提示等功能，将v-model指令拆分成了两个部分：一个是v-model指令，用于监听表单元素的输入事件，并将用户输入的值更新到Vue实例中的数据；另一个是:model指令，用于将Vue实例中的数据更新到表单元素的值上。

例如，在Vue3中，可以这样使用v-model指令：

<template>
  <input v-model="message" />
</template>

<script>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      const message = ref('Hello, Vue!')
      return { message }
    }
  })
</script>

或者这样使用:model指令：

<template>
  <input :modelValue="message" @update:modelValue="val => message = val" />
</template>

<script>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      const message = ref('Hello, Vue!')
      return { message }
    }
  })
</script>

这两种方式都可以实现双向数据绑定。需要注意的是，:modelValue和@update:modelValue是:model指令的两个属性，其中:modelValue是用于绑定表单元素的值，@update:modelValue则是用于监听表单元素值的变化并将其更新到Vue实例中的数据。