Vue3 中的 v-model 语法糖（三种写法）

作者：System 时间：2024年08月09日分类：所有,vue.js 字数：1130

这篇文章距离上次修改已过239天，其中的内容可能已经有所变动。

在Vue3中，v-model 实际上是一个语法糖，它让绑定值和输入框（或者其他表单控件）的值保持同步。v-model 在内部为不同的输入类型使用不同的属性并且发送不同的事件。

以下是 v-model 的三种常见写法：

默认写法，用于 input、textarea、select 元素：

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

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

对于复选框和单选按钮，v-model 收集一个数组或者布尔值：

<!-- 复选框，绑定到一个布尔值 -->
<template>
  <input type="checkbox" v-model="checked" />
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

<!-- 单选按钮，绑定到同一个布尔值 -->
<template>
  <input type="radio" v-model="picked" value="yes" />
  <input type="radio" v-model="picked" value="no" />
</template>

<script>
export default {
  data() {
    return {
      picked: 'yes'
    }
  }
}
</script>

对于绑定到对象的情况，可以使用 v-model 对象语法：

<template>
  <input v-model="form.name" />
  <input v-model="form.age" type="number" />
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: null
      }
    }
  }
}
</script>

以上代码展示了 v-model 在不同情况下的使用方法。

Vue3 中的 v-model 语法糖（三种写法）

评论已关闭

推荐阅读