v-modelv-model
【摘要】 1.基本使用v-model可以实现表单元素和数据的双向绑定什么是双向绑定？例如<input type=“text” v-model=“message”>message的数据改变，input输入框中的数据会随之变化input输入框中的数据变化了，message的数据也会改变v-model其实是一个语法糖，它背后的本质是两个操作1.v-bind绑定一个value属性2.v-on指令给当前元素绑定...
1.基本使用
v-model可以实现表单元素和数据的双向绑定
什么是双向绑定？
例如<input type=“text” v-model=“message”>
message的数据改变，input输入框中的数据会随之变化
input输入框中的数据变化了，message的数据也会改变
v-model其实是一个语法糖，它背后的本质是两个操作
1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件
<input type=“text” :value=“message” @input = “message = $event.target.value”>
和 <input type=“text” v-model=“message”>等价
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" :value="message" @input="message=$event.target.value">
<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:'你好啊！'
}
})
</script>
</body>
</html>
2.v-model和radio属性结合
在input元素中
radio单选按钮属性
name 属性用于对提交到服务器后的表单数据进行标识
将name属性设置为不同的值，可对两个选择按钮进行同时选择
将name属性设置为相同的值，就能实现互斥选择
<!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" value="男" name="sex" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" value="女" name="sex" v-model="sex">女
</label>
<h2>您选择的性别是：{{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
sex: '男'
}
})
</script>
</body>
</html>
在这里，因为有了v-model，两个input标签里的name属性去掉也可以实现互斥访问
3.v-model结合checkbox属性
代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1.checkbox单选框-->
<label for="">
<input type="checkbox" id="license" v-model="isAgree">同意协议
</label>
<h2>您选择的是：{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button><br>
<!-- 2.checkbox复选框-->
<input type="checkbox" value="basketball" v-model="hobbies">篮球
<input type="checkbox" value="badminton" v-model="hobbies">羽毛球
<input type="checkbox" value="football" v-model="hobbies">足球
<input type="checkbox" value="table tennis" v-model="hobbies">乒乓球
<h2>您的爱好：{{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
isAgree: false,
hobbies: [],
}
})
</script>
</body>
</html>
PS：input标签里的value不建议写死，可以动态绑定，修改如下
<label v-for="item in originalHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
...
const app = new Vue({
el:'#app',
data:{
isAgree: false,
hobbies: [],
originalHobbies: ['台球','排球','网球','篮球']
}
})
4.v-model结合select属性
代码示例
select添加一个mutiple属性就可以实现选择多个选项(选多个的时候要按Ctrl键)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1.select选择一个-->
<select name="favorite" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="西瓜">西瓜</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您最喜欢的水果：{{fruit}}</h2>
<!-- 2.select选择多个-->
<select name="favorite" 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>
5.修饰符
①lazy修饰符
v-model默认是在input事件中同步输入框的数据的，你只要改变输入框的数据，对于data中的数据就会立即跟着改变
lazy修饰符可以让数据在失去焦点或者回车时才会更新
②number修饰符
默认情况下，在输入框中无论输入字母还是数字，都会被当作字符串类型进行处理
但是如果我们希望处理的是数字类型，number修饰符可以让输入框中的内容自动转成数字类型
③trim修饰符
该修饰符可以过滤掉输入内容左右两侧的空格
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1.lazy修饰符-->
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>
<!-- 2.number修饰符-->
<input type="number" v-model.number="age"><br>
<h2>{{age}}-{{typeof age}}</h2>
<!-- 1.trim修饰符-->
<input type="text" v-model="name"><br>
<h2>您的名字是：{{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'aaa',
age: 0,
name: '',
}
})
</script>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）