Vue 双向绑定
Vue 表单输入绑定
简介
表单输入绑定是 Vue.js 提供的一种特性，用于实现在表单元素和 Vue 实例之间建立双向绑定关系。
通过双向绑定，可以使得表单元素的值发生变化时，Vue 实例中的数据也会相应地更新，反之亦然。
Vue 提供了 v-model 的指令来实现双向绑定，语法格式如下所示：
<!-- 表单元素 绑定 Vue实例 -->
<input v-model="变量名">
文本绑定的基本用法
v-model 可以实现单行或多行文本与页面元素的双向绑定，使得数据的变化也会实时地反映在页面上，代码的实现如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 引入 Vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
// 导入 Vue 中的 createApp和ref
const { createApp, ref } = Vue;
// 文本、多行文本
window.onload = function () {
createApp({
setup() {
// 文本
const oneText = ref('')
// 多行文本
const mulText = ref('')
return {
oneText,
mulText,
};
},
}).mount("#app");
};
</script>
</head>
<body>
<div id="app">
<!-- 文本 -->
<p>
<p>输入的单行文本为：
{{oneText}}
</p>
<input v-model="oneText" placeholder="请输入单行文本">
</p>
<div>===================</div>
<!-- 多行文本 -->
<p>
<p>输入的多行文本为：</p>
<p style="white-space: pre-line;">{{mulText}}</p>
<textarea v-model="mulText"></textarea>
</p>
<div>===================</div>
</div>
</body>
</html>
实现效果如下图所示：
表单控件的基本用法
v-model 还可用于将单选、复选框或选择器的状态绑定到页面元素上，根据所选状态的不同实时改变页面的元素。
为了展示效果，以下代码会使用 <label> 标签。通过将 for 属性设置为与任意标签的 id 属性相同的值，可以使得 <label> 与相应的标签关联起来，从而在用户点击 <label> 时触发相关联标签的事件。
实现代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 引入 Vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
// 导入 Vue 中的 createApp和ref
const { createApp, ref } = Vue;
//复选框、单选按钮、选择器
window.onload = function () {
createApp({
setup() {
// 复选框状态
const checkState = ref()
// 多选
const checkMul=ref([])
// 单选状态
const radioState = ref()
// 选择器
const selectState = ref()
return {
checkState,
checkMul,
radioState,
selectState
};
},
}).mount("#app");
};
</script>
</head>
<body>
<div id="app">
<!-- 复选框 -->
<p>
<input type="checkbox" v-model="checkState" />
<label >{{ checkState ? '选中状态' : '未选中状态' }}</label>
</p>
<div>===================</div>
<!-- 多选 -->
<p>
<p>选择喜欢的猫：{{checkMul}}</p>
<input type="checkbox" id="buo" value="布偶猫" v-model="checkMul">
<label for="buo">布偶猫</label>
<input type="checkbox" id="bs" value="英短" v-model="checkMul">
<label for="bs">英短</label>
<input type="checkbox" id="blue" value="蓝猫" v-model="checkMul">
<label for="blue">蓝猫</label>
<input type="checkbox" id="sim" value="暹罗猫" v-model="checkMul">
<label for="sim">暹罗猫</label>
</p>
<div>===================</div>
<!-- 单选按钮 -->
<p>
<div>已选：{{radioState}}</div>
<input type="radio" id='A' value="A" v-model="radioState">
<label for="A">选择A</label>
<input type="radio" id='B' value="B" v-model="radioState">
<label for="B">选择B</label>
<input type="radio" id='C' value="C" v-model="radioState">
<label for="C">选择C</label>
</p>
<div>===================</div>
<!-- 选择器 -->
<p>
<div>已选：{{selectState}}</div>
<select v-model="selectState">
<option disabled value="">请选择你所在的城市</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</p>
<div>===================</div>
</div>
</body>
</html>
页面实现效果如下图所示：
修饰符
上述示例中，v-model 指令没有使用任何修饰符，所以 <input> 标签中输入的内容会自动更新。
如果需要让 <input> 标签输入的内容限制在一定的条件之后显示，就可以使用修饰符。
常用修饰符
.lazy：用于在事件之后进行同步。.number：将用户的输入值转换为数值类型。因为在默认情况下，输入框中无论我们输入的是字母还是数字，都会被当成字符串来处理。.number 修饰符可以让在输入框中输入的数字内容自动转成数字类型。.trim：自动过滤用户输入的首部和尾部的空白字符。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<!--用于在事件之后进行同步-->
<input type="text" v-model.lazy="lazy" />
<h2>{{ lazy }}</h2>
<br />
<!-- 将用户的输入值转换成数值类型
typeof 的作用就是用来区分数据的类型的，这里用来显示 number 这个变量值的类型。-->
<input type="text" v-model.number="number" />
<h2>{{typeof number}}</h2>
<br />
<!--自动过滤用户输入的首部和尾部的空白字符-->
<input type="text" v-model.trim="trim" />
<h2>空格{{ trim }}空格</h2>
<br />
</div>
</body>
</html>
<script>
const { createApp, ref } = Vue;
createApp({
data() {
return { msg: "", lazy: "", number: "", trim: "" };
},
}).mount("#app");
</script>
查看页面效果如下图所示：
在这个示例中，<input> 输入框使用了 lazy 修饰符，在失去鼠标焦点之后，才会同步内容。
用 number 修饰符的 <input> 框会将数字识别为 number 类型，如果没有用修饰符，即使输入了数字，识别的也只会是 string 类型。
用 trim 修饰符的 <input> 框会自动将前后的空格去掉。
总结
本节介绍了 v-model 双向绑定的使用方式。结合 v-bind 可以实现对值的绑定，同时结合修饰符可以更加灵活地控制表单元素的显示状态。