12-不得不学的Vue.js基础之表单输入绑定

前端 · 2020-07-22 ·
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>表单输入绑定</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<!--1.基础用法:v-model 指定可以在表单 <input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model本质是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。-->
		<!--v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。-->
		<!--v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件-->
		<!--
			· text和textarea 元素使用 value property 和 input 事件
			· checkbox 和 radio 使用 checked property 和 change 事件
			· select 元素使用 value property 和 change 事件
		-->
		<!--#1.1.文本-->
		<input v-model="message" placeholder="edit me">
		<p>Message is: {{ message }}</p>
		<!--#1.2.多行文本-->
		<textarea v-model="message2" placeholder="add multiple lines"></textarea>
		<p style="white-space: pre-line;">Multiline message is:{{ message2 }}</p>
		<!--#1.3.复选框:单个复选框,绑定到布尔值-->
		<p><input type="checkbox" id="checkbox" v-model="checked">
		<label for="checkbox">{{ checked }}</label></p>
		<!--多个复选框,绑定到同一个数组:-->
		<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>
		<p><span>Checked names: {{ checkedNames }}</span></p>
		<!--#1.4.单选按钮-->
		<p><input type="radio" id="one" value="One" v-model="picked">
		<label for="one">One</label>
		<input type="radio" id="two" value="Two" v-model="picked">
		<label for="two">Two</label>
		<br>
		<span>Picked: {{ picked }}</span></p>
		<!--#1.5.选择框-->
		<!--#1.5.1单选时
			如果 v-model 表达式的初始值未能匹配任何选项,<select> 元素将被渲染为“未选中”状态。在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。
		-->
		<p>
		<select v-model="selected">
		  <option disabled value="">请选择</option>
		  <option>A</option>
		  <option>B</option>
		  <option>C</option>
		</select>
		<span>Selected: {{ selected }}</span>
		</p>
		<!--#1.5.2多选时-->
		<p>
			<select v-model="selected2" multiple style="width: 50px;">
			  <option>A</option>
			  <option>B</option>
			  <option>C</option>
			</select>
			<br>
			<span>Selected: {{ selected2 }}</span>
		</p>
		<!--#1.5.3用v-for渲染动态选项-->
		<p>
			<select v-model="selected3">
			  <option v-for="option in options" v-bind:value="option.value">
			    {{ option.text }}
			  </option>
			</select>
			<span>Selected: {{ selected3 }}</span>
		</p>

		<!--2.值绑定:对于单选按钮、复选框及选择框的选项,v-model 绑定的值通常是静态字符串(对于复选框也可以是布尔值)-->
		<!--2.1.当选中时,`picked2` 为字符串 "a"-->
		<p><input type="radio" v-model="picked2" value="apicked2">{{picked2}}</p>
		<!--2.2.`toggle` 为 true 或 false -->
		<p><input type="checkbox" v-model="toggle">{{toggle}}</p>
		<!--2.3.当选中第一个选项时,`selected4` 为字符串 "abc" -->
		<p>
			<select v-model="selected4">
			  <option value="abc">ABC</option>
			</select>
			{{selected4}}
		</p>
		<!--2.4.有时可能想把值绑定到Vue实例的一个动态 property上,这时可以用v-bind实现。-->
		<!--2.4.1复选框-->
		<p>
			<input
			  type="checkbox"
			  v-model="toggle2"
			  true-value="yes"
			  false-value="no"
			>
			{{toggle2}}
		</p>
		<!--2.4.2单选按钮-->
		<p>
			<input type="radio" v-model="pick3" v-bind:value="a">{{pick3}}
		</p>
		<!--2.4.3选择框的选项-->
		<p>
			<select v-model="selected5">
			    <!-- 内联对象字面量 -->
			  <option v-bind:value="{ number: 123 }">123</option>
			</select>
			{{
				selected5.number
			}}
		</p>

		<!--3.修饰符-->
		<!--3.1 .lazy 在默认情况下,v-model 在每次input时间触发后将输入框的值与数据进行同步,可以添加lazy 修饰符,转为在 change事件之后进行同步-->
		<p><input v-model="message">{{message}}
		<br>
		<input v-model.lazy="message">{{message}}</p>
		<!--3.2 .number 如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符-->

		<p><input v-model.number="age">{{age}}</p>
		<!--3.3 .trim 如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符-->
		<input v-model="msg">-{{msg}}-
		<input v-model.trim="msg">-{{msg}}-
	</div>
	<script>
		// 全局对象
		var vm = new Vue({
			el: "#app",
			data:{
				message:"",
				message2:"",
				checked:true,
				checkedNames: [],
				picked:'One',
				selected:'',
				selected2:[],
				selected3: 'A',
				options: [
				  { text: 'One', value: 'A' },
				  { text: 'Two', value: 'B' },
				  { text: 'Three', value: 'C' }
				],
				picked2:'',
				toggle:false,
				selected4: '',
				toggle2:'no',
				a:'zzs',
				pick3:'',
				selected5:'',
				age:'23',
				msg:''
			}
		});
	</script>
</body>
</html>

以下是测试数据:

Message is: {{ message }}

Multiline message is:{{ message2 }}

Checked names: {{ checkedNames }}


Picked: {{ picked }}

Selected: {{ selected }}


Selected: {{ selected2 }}

Selected: {{ selected3 }}

{{picked2}}

{{toggle}}

{{selected4}}

{{toggle2}}

{{pick3}}

{{ selected5.number }}

{{message}}
{{message}}

{{age}}

-{{msg}}- -{{msg}}-
%