表单绑定v-model

目录

• 表单绑定v-model
  • 案例：
  • v-model原理
  • v-model结合radio
  • v-model结合checkbox
  • v-model结合select
  • v-bind修饰符

表单绑定v-model

• 表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。

• Vue中使用v-model指令来实现表单元素和数据的双向绑定

案例：

<div id="app">
	<input type="text" v-model="message">
 
	<h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el : "#app",
		data : {
			message : "你好",
		},
		methods : {
			valueChange( event ) {
				this.message = event.target.value
			}
		}
	})
</script>

v-model原理

• v-model其实是一个语法糖，他的背后实质上是包含两个操作：

  • 1- v-bind动态绑定一个value

• 2- v-on指令给当前元素绑定input事件

<input type="text" :value="message" @input="message=$event.target.value">

v-model结合radio

<div id="app">
	<label for="male">
		<input type="radio" id="male" name="sex" value="男" v-model="sex">男
	</label>
	<label for="female">
		<input type="radio" id="female" name="sex" value="女" v-model="sex">女
	</label>
	<h2>{{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el : "#app",
		data : {
			message : "你好",
			sex : '男'
		}
	})
</script>

v-model结合checkbox

<div id="app">
	<!--单选框-->
	<label for="protocol">
		<input type="checkbox" id="protocol" v-model="isAgree">同意协议</input>
	</label>
	<h2>{{agree}}</h2>
	<button :disabled="!isAgree">下一步</button>
 
	<br>
 
	<!--多选框-->
		<input type="checkbox" value="篮球" v-model="hobbies">篮球<br>
		<input type="checkbox" value="足球" v-model="hobbies">足球<br>
		<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球<br>
		<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球<br>
	<h2>{{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el : "#app",
		data : {
			message : "你好",
			isAgree : false,  // 单选框
			hobbies:[]        // 多选框
		},
		computed : {
			agree() {
				return this.isAgree ? '同意' : '不同意'
			}
		}
	})
</script>

值绑定

<label v-for="item in originHobbies">
    <input type="checkbox" :value="item" v-model="hobbies">{{item}}<br>
</label>

v-model结合select

<div id="app">
	<!--选择一个-->
	<select name="fruit" id="fruit" v-model="fruit">
		<option value=""></option>
		<option value="苹果">苹果</option>
		<option value="香蕉">香蕉</option>
		<option value="榴莲">榴莲</option>
		<option value="葡萄">葡萄</option>
	</select>
	<h2>{{fruit}}</h2>
 
 
	<!--选择多个-->
	<select name="fruits" id="fruits" v-model="fruits" multiple>
		<option value=""></option>
		<option value="苹果">苹果</option>
		<option value="香蕉">香蕉</option>
		<option value="榴莲">榴莲</option>
		<option value="葡萄">葡萄</option>
	</select>
	<h2>{{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el : "#app",
		data : {
			message : "你好",
			fruit : '',
			fruits : []
		}
	})
</script>

v-bind修饰符

• lazy修饰符：

  • 默认情况下，v-model默认是在input事件中同步输入框的数据的，也就是说，一旦有数据发生改变对应的data中的数据的时候就会自动发生改变
  • lazy修饰符可以让数据在失去焦点或者回车时才会更新

• number修饰符：

  • 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当作字符串类型进行处理，但是如果我们希望处理的是数字类型，那么最好直接将内容当作数字处理。
  • number修饰符可以让在输入框中的内容自动转成数字类型

• trim修饰符

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

<div id="app">
	<input type="number" @input="getAmount" v-model.number="amount">
	<h2>{{typeof amount}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el : "#app",
		data : {
			amount : 0
		},
		methods : {
			getAmount(event) {
				if (this.amount!='' && typeof parseInt(event.target.value) == 'number')
					this.amount = this.amount.toFixed(2)
			}
		}
	})
</script>

金额校验问题：

1. v-model.number中肯定不能使用toFixed方法
2. 当文本框中无数据，最后一个退格会转换成（22）数字格式，要加amount校验