11 - Vue 学习笔记 - input 中的值绑定、v-model 修饰符

值绑定

很多情况下，我们的数据并不是写死的，它有可能是从服务器获取，获取过来再动态生成这些数据。

我们也可以借助一个 v-for 完成 input 的值绑定

<div id="app">
	<!-- 值绑定	-->
	<!-- :for 动态绑定 label 标签的 for 属性 -->
	<label v-for="hobby in originHobbies" :for="hobby">
		<input type="checkbox" :value="hobby" :id="hobby" v-model="hobbies">{{hobby}}
	</label>
	<h2>您的爱好是：{{hobbies}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			isAgree: false,
			hobbies: [],
			// originHobbies 是从服务器获取出来的数据
			originHobbies: ['篮球', '足球', '羽毛球', '乒乓球']
		}
	});
</script>

我们可以发现这样就可以实现动态的构建复选框，并且语法也更简洁。

v-model 修饰符

lazy 修饰符

默认情况下，v-model 默认是在 input 事件中同步输入框的数据，也就是说，一旦有数据发生改变对应的 data 中的数据就会自动发生改变。
但是，如果修改频率过高的话，性能可能有所损失，我们希望当用户输入完成后，再去修改对应 data 中的数据，这个时候就要用到 lazy 修饰符。
lazy 修饰符可以让数据在失去焦点或者回车时才会更新。

<div id="app">
	<!-- 修饰符 lazy -->
	<label>
		<input type="text" v-model.lazy="message">
	</label>
	<h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			message: "hello"
		}
	});
</script>

我们可以发现，当我们输入内容时，下方的 h2 内容不会发生改变，只有当输入回车或者失去鼠标焦点，才会发生改变。

number 修饰符

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当作字符串进行处理。

<div id="app">
	<!-- 修饰符 number	-->
	<label>
		<input type="number" v-model="age">
	</label>
	<h2>{{age}}--{{typeof age}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			age: ''
		}
	});
</script>

我们会发现，即便 input 设置了类型为 number 但是，Vue 依然把当前数据当作 string 处理。
如果我们希望处理的是数据类型，那么最好直接将内容当做数字处理。
number 修饰符可以让输入框中输入的内容自动转换成数据类型。
我们只需要在绑定数据那增加修饰符，如下，就可以让 Vue 对输入的数据当作 number 类型处理

<input type="number" v-model.number="age">

trim 修饰符

如果输入的内容首尾有很多空格，通常我们希望将其去除。
trim 修饰符可以过滤内容左右两边的空格。

<div id="app">
	<!-- 修饰符 trim	-->
	<label>
		<input type="text" v-model="name">
	</label>
	<h2>您输入的姓名：{{name}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			name: ''
		}
	});
</script>

我们会发现浏览器会帮我们处理掉一些空格，但是我们通过控制台会发现，内存中的 name 保存的依旧是有空格的字符串。
如果需要去除这些字符串，只需要添加修饰符 trim 即可

<input type="text" v-model.trim="name">