VUE指令-数据绑定v-model

程序员文章站 2022-05-16 18:33:04

...

用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data选项中声明初始值。

VUE框架数据绑定模型(MVVM)

v-model: "xxx" 文本输入框

v0.文本输入框</div>

<hr />

<div>

<p>{{v0_message}}</p>

</div>

v-model: "xxx" 多行文本输入

v1.多行文本</div>

<hr />

<div>

<p>{{v0_message}}</p>

</div>

v-model: "xxx" 复选框

v2.复选框</div>

<hr />

<div>

</div>

v-model: "xxx" 多个复选框

v3.多个复选框</div>

<hr />

<div>

<br>

<span>Checked names: {{ checkedNames }}</span>

</div>

v-model: "xxx" 单选按钮

v4.单选按钮</div>

<hr />

<div>

<br>

<br>

<span>Picked: {{ picked }}</span>

</div>

v-model: "xxx" 选择框

v5.选择框</div>

<hr />

<div>

</select>

<span>Selected: {{ selected }}</span>

</div>

其他用法

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<!DOCTYPE html>
<html style="height: 100%;">

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="../lib/vue.v2.5.12.js"></script>
		<title>v-model</title>
	</head>

	<body style="height: 100%;">
		<style>
			.style0 {
				font-size: 25px;
				color: green;
			}
			
			.style1 {
				background: gold;
			}
		</style>
		<!-- 
			VUE指令v-model数据绑定指令
				
			REF:
				http://www.runoob.com/vue2/vue-forms.html
				https://cn.vuejs.org/v2/guide/forms.html
		-->
		<div id="appVue">
			<!-- 选择框<select/> -->
			<!-- 格式v-model="变量" -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v5.选择框</div>
				<hr />
				<div>
					<div>
						<select v-model="selected">
							<option disabled value="">请选择</option>
							<option>A</option>
							<option>B</option>
							<option>C</option>
						</select>
						<span>Selected: {{ selected }}</span>
					</div>
				</div>
			</div>

			<!-- 单选按钮<input type="radio"/> -->
			<!-- 格式v-model="变量" -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v4.单选按钮</div>
				<hr />
				<div>
					<div>
						<input type="radio" id="one" value="One" v-model="picked">
						<label for="one">One</label>
						<br>
						<input type="radio" id="two" value="Two" v-model="picked">
						<label for="two">Two</label>
						<br>
						<span>Picked: {{ picked }}</span>
					</div>
				</div>
			</div>

			<!-- 多个复选框<input type="checkbox"/> -->
			<!-- 格式v-model="变量" -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v3.多个复选框</div>
				<hr />
				<div>
					<div>
						<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
						<label for="jack">Jack</label>
						<input type="checkbox" id="john" value="John" v-model="checkedNames">
						<label for="john">John</label>
						<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
						<label for="mike">Mike</label>
						<br>
						<span>Checked names: {{ checkedNames }}</span>
					</div>
				</div>
			</div>

			<!-- 复选框<input type="checkbox"/> -->
			<!-- 格式v-model="变量" -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v2.复选框</div>
				<hr />
				<div>
					<div>
						<input type="checkbox" v-model="v1_bool" style="font-size: 20px;"></input>
						<p>{{v1_bool}}</p>
					</div>
				</div>
			</div>

			<!-- 多行文本输入框<textarea/> -->
			<!-- 格式v-model="变量" -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v1.多行文本</div>
				<hr />
				<div>
					<div>
						<textarea v-model="v0_message" placeholder="place holder text" style="font-size: 20px;"></textarea>
						<p>{{v0_message}}</p>
					</div>
				</div>
			</div>

			<!-- 文本输入框<input/> -->
			<!-- 格式v-model="变量" -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v0.文本输入框</div>
				<hr />
				<div>
					<div>
						<input v-model="v0_message" style="font-size: 20px;"></input>
						<p>{{v0_message}}</p>
					</div>
				</div>
			</div>
		</div>
		<script>
			new Vue({
					el: "#appVue",
					data: {
						selected: '',
						picked: '',
						checkedNames: [],
						v1_bool: false,
						v0_message: "还没输入"
					}
				}

			)
		</script>
	</body>

</html>

REF:

http://www.runoob.com/vue2/vue-forms.html

https://cn.vuejs.org/v2/guide/forms.html

VUE指令-数据绑定v-model

VUE-Table上绑定Input通过render实现双向绑定数据的示例

Vue常用指令V-model用法

vue数据双向绑定原理解析（get & set)

vue.js的双向数据绑定Object.defineProperty方法的神奇之处

详解vue的数据binding绑定原理

vue.js通过自定义指令实现数据拉取更新的实现方法

vue2.0数据双向绑定与表单bootstrap+vue组件

简单谈谈Vue 模板各类数据绑定

如何理解Vue的v-model指令的使用方法

Vue.js+Layer表格数据绑定与实现更新的实例