目录
一、v-model的基本使用
在用户信息的提交过程中,常常需要使用大量的表单,使用v-model指令就能实现表单元素与数据的双向绑定
语法:
<inpute v-model="message">
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊"
}
})
</script>
</body>
</html>
执行结果:
可以看到message的值已经绑定到input表单里了,这跟mustache语法有点像 ,但是v-model是双向绑定的,即不单单message值绑定到input,而且input的值也绑定到message中。当我们改变input的值,message的值也会跟着改变。
v-model其实是一个语法糖,背后包含着两个操作:
- v-bind绑定value属性
- v-on绑定input事件
刚刚的代码等价于:
<div id="app">
<!-- <input type="text" v-model="message">-->
<input type="text" :value="message" @input="changeInput">
<!-- 或-->
<input type="text" :value="message" @input="message = $event.target.value">
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊"
},
methods:{
changeInput(event){
this.message = event.target.value;
}
}
})
</script>
二、v-model与radio的使用
radio即单选框,在使用时为了保证每个单选框互斥要给每个radio绑定相同的name属性,希望默认选中的radio要添加checked属性。
<label for="male">
<input type="radio" id="male" name="sex" value="男" checked>男
</label>
<label for="femal">
<input type="radio" id="femal" name="sex" value="女">女
</label>
在使用了v-model绑定value后这两个属性都可以略去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<label for="male">
<input type="radio" id="male" v-model="sex" value="男" >男
</label>
<label for="femal">
<input type="radio" id="femal" v-model="sex" value="女">女
</label>
<h2>你选择的性别是:{{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
sex:"男"
}
})
</script>
</body>
</html>
执行结果:
因为同一组radio用v-model绑定的是同一个data数据,所以name属性可以略去。要想使radio默认选中,只需在v-modle绑定的属性sex处设定初始的value即可。选中不同的radio,绑定的sex的值也跟着改变,相反,改变sex的值,所选中的radio也会改变。
三、v-model与checkbox的使用
1.checkbox单选框
checkbox单选框在注册时或使用软件的一些同意协议比较常用,用v-model可以绑定一个布尔值来判断有没有选中,以此来判断能否进入下一步操作。此时的value并不影响v-model的值。
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<h2>你选择的是:{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
isAgree:false
}
})
</script>
</body>
</html>
执行结果:
勾选前isAgree为false,button绑定的disabled为ture,按钮失效,勾选后isAgree为ture,反之按钮变为可用状态。初始状态是否勾选也是看绑定的isAgree的值是ture还是false。
2.checkbox复选框
v-model绑定复选框是要与一个数组绑定,方便存储选中的多个value
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="checkbox" value="唱" v-model="hobbies">唱
<input type="checkbox" value="跳" v-model="hobbies">跳
<input type="checkbox" value="rap" v-model="hobbies">rap
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<h2>你的爱好是:{{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
hobbies:[]
}
})
</script>
</body>
</html>
执行结果:
勾选了哪个,绑定的数组就会添加哪个value,勾选的顺序不同,往数组添加的顺序也会不一样。需要设置默认勾选时,也是设置绑定的hobbies的值就行了。
四、v-model与select的使用
select也和checkbox一样,也分单选和多选两种情况,不过实际开发比较少用,所以直接看栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- select单选-->
<select name="a" id="a" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="雪梨">雪梨</option>
<option value="西瓜">西瓜</option>
</select>
<h2>你选择的水果是:{{fruit}}</h2>
<!-- select多选-->
<select name="b" id="b" v-model="fruits" multiple>
<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:{
fruit:"香蕉",
fruits:[]
}
})
</script>
</body>
</html>
执行结果:
单选时绑定一个值。多选时绑定一个数组,按住ctrl多选时会将对应value添加到数组中。设置默认选中也是设置绑定的值即可。
五、v-model的值绑定
实际开发中,我们input的value一般都不是写死的,都是从服务器取得有什么数据可以供用户选择的,这时就需要动态绑定value和id。
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 值绑定-->
<h2>你的爱好是:{{hobbies}}</h2>
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
hobbies:[],
originHobbies:['篮球','足球','乒乓球','羽毛球','地球']
}
})
</script>
</body>
</html>
执行结果:
六、v-model的修饰符的使用
- lazy修饰符
默认情况下。v-model默认 时在input事件同步输入框数据的。即在输入框输入时,data中的数据就会频繁更新。lazy修饰符可以让数据在失去焦点或者用户敲击回车时才会更新。
语法:
<inpute v-model.lazy="message">
- number修饰符
默认情况下,输入框中无论输入的是字母还是数字,都会被当作字符串类型处理。但如果我们希望处理的是数字类型,使用number修饰符可以让输入框中输入的内容转成数字类型。
语法:
<inpute v-model.number="message">
- trim修饰符
trim修饰符用于剥除输入的字符串两边的空格
语法:
<inpute v-model.number="message">