Vue-双向绑定

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>