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>