v-model双向数据绑定v-bind 只能实现数据的单向绑定，将数据绑定到 DOM 元素上，修改数据，DOM自动渲染。

v-bind 只能实现数据的单向绑定，将数据绑定到 DOM 元素上，修改数据，DOM自动渲染。但是修改DOM中的值，Vue 中的数据无法同步修改。

v-model 是实现双向数据绑定，双向数据绑定是修改了 Vue 的数据，DOM 元素会重新渲染，修改了 DOM 元素中的值，Vue 中的数据也会发生变化。但是 v-model 只能运用在表单元素中，例如 input、select 等，不能运用在 div、span 中。

举个栗子：

<template>

  <h4>{{msg}}</h4>

  <!-- 使用v-model指令，可以实现 表单元素和数据的双向数据绑定 -->
  <input type="text" v-model="msg">

</template>

<!-- setup -->
<script lang="ts" setup>
import { ref } from 'vue'

let msg = ref("Hello Doubi")  // 需要使用响应式数据

</script>

上面的代码，使用了 v-model 在 input 上绑定了 msg 的值，这样在修改文本中的数据的时候，msg 的值就会发生变化，则 <h4> 中的内容就会同步更新。修改 msg 的值，input 中的值也会发送变化。

注意：v-model 只能运用在表单元素中。