Vue3_双向绑定

单向绑定

使用v-bind实现

响应式数据发生变化时，更新dom树

用户的操作如果造成页面内容的改变不会影响响应式数据

<script setup >
import {ref} from 'vue'
let message = ref("张三")
</script>
<template>

<div>
  <input type="text" v-bind:value="message"><br>
  {{message}}   
</div>
</template>

<style scoped>
</style>

双向绑定

使用v-model实现

页面上的数据由于用户的操作造成了改变，也会同步修改对应的响应式数据

双向绑定一般都用于表单标签

双向绑定也有人称呼为收集表单信息的命令
v-model:value="数据" 双向绑定
v-model:value 一般都省略 :value

<script setup >
import {ref} from 'vue'
let message = ref("张三")
</script>
<template>

<div>
  <input type="text" v-model="message"><br>
  {{message}}   
</div>
</template>

<style scoped>
</style>