Vue-双向绑定

我们之前学过有关vue的命令，都是单向绑定：当响应式数据发生变化时，更新Dom树

单向绑定时，用户的操作如果造成页面内容的改变也不会影响响应式数据

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

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

双向绑定也被称呼为收集表单信息的命令

v-model:value="数据" 但vue3中强制缺省了value= 写成 v-model="数据"

---

input标签的双向绑定

text和password的双向绑定

这里的v-model命令其实是将input标签的value值与对象的属性进行绑定

当用户输入数据时，响应式数据修饰的对象的属性也会随之改变

<script setup>
import { reactive } from "vue";

let user = reactive({
  username:"",
  userPwd:""
})
</script>

<template>
  <div>
    <input type="text" v-model="user.username"><br>
    <input type="password" v-model="user.userPwd"><br>
      
    {{user}} 
  </div>
</template>

<style scoped>
</style>

---

多选框的双向绑定

当复选框使用v-model命令时，实质上使用的是 v-model:name="数据"

这里强制缺省:name，所以写成v-model="数据"

注：这里的数据要写成原本name的属性值，也就是多选框的所属组，value的值需要额外的属性来写

<script setup>
import { reactive,ref } from "vue";

let user = reactive({
  username:"",
  userPwd:""
})

let hbs = ref([])
</script>

<template>
  <div>
    <input type="text" v-model="user.username"><br>
    <input type="password" v-model="user.userPwd"><br>

    爱好：
    唱<input type="checkbox" v-model="hbs" value="sing">
    跳<input type="checkbox" v-model="hbs" value="dance">
    rap<input type="checkbox" v-model="hbs" value="rap">

    {{user}} <br>
    {{hbs}}
  </div>
</template>

<style scoped>
</style>

---

单选框的双向绑定

这里的v-model仍然使用v-model:name="数据" 的方式

当使用v-model命令时，name依旧可以省略

爱好：
唱<input type="radio"  v-model="hbs" value="sing">
跳<input type="radio"  v-model="hbs" value="dance">
rap<input type="radio" v-model="hbs" value="rap">

---

文本域的双向绑定

这里的v-model就没有与任何属性进行绑定，与input不同，textare没有value属性

而写法仍然不变 v-model="数据"，将会把文本域中数据与"数据"进行绑定

<script setup>
import { reactive } from "vue";

let user = reactive({
  intro:""
})
</script>

<template>
  <div>
    {{user.intro}}
    <textarea name="" id="" cols="30" rows="10" v-model="user.intro"></textarea>
  </div>
</template>

<style scoped>
</style>

---

下拉框的双向绑定

与文本域大概相同，这里的v-model同样没有与任何属性进行绑定

将下拉菜单的单选项与 v-model="数据"中的 "数据" 进行绑定

<script setup>
import { reactive } from "vue";

let user = reactive({
  pro:""
})

</script>

<template>
  <div>
    <select name="" id="" v-model="user.pro">
      <option value="1">京</option>
      <option value="2">津</option>
      <option value="3">冀</option>
    </select>
  </div>
</template>

<style scoped>
</style>

---

清空按钮 -> 事件 ->函数

注：响应式数据在删除时，不能直接通过user = {} 或者hbs = []的声明方式清除数据

对象可以通过将其属性重新赋值的方式删除数据

数组可以通过API：splice删除数据

注：ref修饰的数据在操作时别忘加上.value

<script setup>
    ……
function clearForm() {
  user.username = "";
  user.userPwd = "";
  user.intro = "";
  user.pro = "";
  hbs.value.splice(0, hbs.value.length);
}
</script>

<template>
  <div>
      ……
    <button @click="clearForm()">清空</button>
  </div>
</template>

<style scoped>
</style>

---