2023-01-02_Vue的表单双向绑定
2023-01-09 本文已影响0人
微笑碧落
前言
- 处理表单数据是前端开发经常需要用到的操作。比如用户注册、用户登录等
- 使用Vue的双向绑定功能，可以很方便的把用户在表单上的输入值绑定到数据属性。完成这种绑定后，就可以只关心数据逻辑，而不用关心数据的获取。
1.完整示例
- 如下是一个完整的示例，演示了各种常见的input组件的绑定。
- 后面是具体的说明和介绍。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向绑定</title>
</head>
<body>
<div style="text-align: center;" id="App">
<input v-model.lazy.trim="textField"/>
<p>输入框的输入值是：{{ textField }}</p>
<textarea v-model="textarea"></textarea>
<p style="white-space: pre-line;">输入框的输入值是：{{ textarea }}</p>
<input type="checkbox" v-model="isCheck"/>是否保存登录状态
<p>{{ isCheck }}</p>
<input type="checkbox" value="足球" v-model="checks"/>足球1
<input type="checkbox" value="篮球" v-model="checks"/>篮球
<input type="checkbox" value="羽毛球" v-model="checks"/>羽毛球
<p>{{ checks }}</p>
<input type="radio" value="男" v-model="sex"/>男
<input type="radio" value="女" v-model="sex"/>女
<p>{{ sex }}</p>
<select v-model="select">
<option>男</option>
<option>女</option>
</select>
<p>{{ select }}</p>
<select v-model="selects" multiple>
<option>足球</option>
<option>篮球</option>
<option>羽毛球</option>
</select>
<p>{{ selects }}</p>
</div>
<script src="vue.global.js"></script>
<script>
const App = {
data(){
return {
textField : "",
textarea: "",
isCheck: false,
checks:[],
sex:"",
select:"",
selects:[]
}
},
methods: {
},
watch: {
}
}
let inst = Vue.createApp(App).mount("#App");
</script>
</body>
</html>
运行结果
2.单行文本输入框
<input v-model.lazy.trim="textField"/>
<p>输入框的输入值是：{{ textField }}</p>
data(){
return {textField:""}
}
3.多行文本输入区域
- 注意，为p元素设置了white-space样式的目的是为了换行显示，否则，行和行直接会用空格代替，没有换行效果。
<textarea v-model="textarea"></textarea>
<p style="white-space: pre-line;">输入框的输入值是：{{ textarea }}</p>
data(){
return {textarea :""}
}
4.单个复选框或单选框（逻辑值）
- 这里主要目的是为了把复选框或单选框是否选中和数据属性绑定起来。
- 注意checkbox或radio效果一样。
- 注意，因为isCheck变量的类型不是数组，所以此时，input的value属性是不起作用的。Vue不会绑定value属性，只会绑定是否选中属性。
<input type="checkbox" v-model="isCheck" value="nihao"/>是否保存登录状态
data(){
return {isCheck: false}
}
5.多个复选框或单选框（获取文本值）
- 实际上经常会同时出现多个复选框或单选框
- 此时就需要获取这些复选框或单选框的文本值
- 注意，此时checks变量的类型必须是数组。vue会把选中的复选框的value的值绑定到数组里面。
- 多组复选框的情况。不需要特别的语法，只要绑定的变量名称不一样，会自动认为是不同组的复选框。
<input type="checkbox" value="足球" v-model="checks"/>足球1
<input type="checkbox" value="篮球" v-model="checks"/>篮球
<input type="checkbox" value="羽毛球" v-model="checks"/>羽毛球
<p>{{ checks }}</p>
data(){
return {checks: []}
}
6.选择框
- 选中框和多个复选框类似。如果是单一选择框就用普通类型。多选选择框就用数组类型的变量。
- 绑定的是选择框的文本值。
7.v-model指令的常用修饰符
7.1lazy修饰符
- 当我们使用v-model指令对文本输入框进行绑定时，每当输入框中的文本发生变化，其都会同步修改对应的属性的值。在某些业务场景下，我们并不需要实时关注输入框中文案的变化，只需要当用户输入完成后再进行数据逻辑的处理
v-model.lazy="text"
7.1trim修饰符
- 自动去掉文本数据的首尾空格
v-model.trim="text"
