Vue 中有两种数据绑定方式：

  1. v-bind 单向绑定: 数据只能从 data 流向页面
  2. v-model 双向绑定: 数据不仅能从 data 流向页面， 还可以从页面流向 data.
  • v-model 一般用在 表单类型元素 上 (ex, input, select)。
  • v-model 需要省略 v-model:value 中的 value ， 因为 v-model 默认收集的就是 value 值。

v-model:value 会提示错误: v-model argument is not supported on plain elements.vue(55)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<template>
<h1>02 数据绑定 v-bind and v-model</h1>
1. v-bind 数据单向绑定 <input type="text" v-bind:value="name"/>
<br>
2. v-model 数据双向绑定 <input type="text" v-model="name"/>
<hr>
</template>

<script setup lang='ts'>import { ref } from 'vue';
let name = ref("zhangsan")
</script>

20220322221633