表单绑定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>
金额校验问题：
- v-model.number中肯定不能使用toFixed方法
- 当文本框中无数据，最后一个退格会转换成（22）数字格式，要加amount校验