表单
v-model
可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。
它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。
应该通过 JavaScript 在组件的 data 选项中声明初始值。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model</title>
</head>
<body>
<div class="app">
<input type="text" v-model='message'>
<h2>{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el : '.app' ,
data : {
message : '请输入'
}
})
</script>
</body>
</html>
结果,如下图:
上图,若在控制台中 修改了message的value值,那么页面也会进行对应的变化(可以按照我给的代码自己尝试下)
若在input中进行更新,会有以下效果,如图:
上图,结果可以看出,在input中修改的内容,也在h2元素显示内容作对应更新,而且在控制台进行重新获取,会发现message的value也进行了修改,这就是双向绑定
v-model 实现原理
'1、v-bind 绑定一个value'
'2、v-on 指令给当前元素绑定input事件'
首先通过,绑定input事件,并设置方法(获取到event对象,取得value,再进行更新到message数据上),这样实现了用户输入内容,改变内部数据迭代单项绑定
而因为Vue是响应式数据,若在控制台修改了message的value,会动态的更新页面,所以,在h2元素上把message加上,那么这样就实现了双向绑定,也就是v-model的实现原理
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model 实现原理</title>
</head>
<body>
<div class="app">
<input type="text" @input='change' :value="message">
<h2>{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el : '.app' ,
data : {
message : 'Jine'
},
methods : {
change(evnet){
this.message = event.target.value;
}
}
})
</script>
</body>
</html>
v-model (radio)
实现,点击当前所选单选按钮,实现页面的数据的更新
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model radio</title>
</head>
<body>
<div class="app">
<label for="#">
<input type="radio" name="男" id="man" v-model='sex' value="男">男
</label>
<label for="#">
<input type="radio" name="女" id="woman" v-model='sex' value="女">女
</label>
<h2>{{select}}{{sex}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el : '.app' ,
data : {
sex : '男',
select : '你当前选择的 :'
}
})
</script>
</body>
</html>
v-model(checkbox)
同意协议案例(单选框)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>同意协议</title>
</head>
<body>
<div class="app">
<label for="#">
<input type="radio" name="agree" id="agree" value="agree" v-model='status'>同意协议
</label>
<button :disabled='!status'>{{next}}</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el : '.app' ,
data : {
next : '下一步',
status : false
}
})
</script>
</body>
</html>
选择爱好案例(多选框)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
<input type="checkbox" value="篮球" v-model='arry'>篮球
<input type="checkbox" value="足球" v-model='arry'>足球
<input type="checkbox" value="羽毛球" v-model='arry'>羽毛球
<input type="checkbox" value="乒乓球" v-model='arry'>乒乓球
<input type="checkbox" value="排球" v-model='arry'>排球
<h2>{{select}}{{arry}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el : '.app' ,
data : {
arry : [] ,
select : '你所选择的是:'
}
})
</script>
</body>
</html>
/*
真实开发中:使用v-bind 动态绑定value,并加入for循环
*/
v-model(select)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择水果</title>
</head>
<body>
<div class="app">
<!-- 选择单个 -->
<select v-model='fruit'>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="桃">桃</option>
<option value="梨">梨</option>
<option value="葡萄">葡萄</option>
</select>
<h2>{{select}}{{fruit}}</h2>
<!-- 选择多个 -->
<select v-model='fruits' multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="桃">桃</option>
<option value="梨">梨</option>
<option value="葡萄">葡萄</option>
</select>
<h2>{{select}}{{fruits}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el : '.app' ,
data : {
fruit : '香蕉' ,
select : '你选择的是:' ,
fruits : []
}
})
</script>
</body>
</html>
修饰符
lazy
默认情况下,v-mode默认是在input事件中,同步输入框的数据(data)的
(可以让数据在失去焦点或回车时更新)
number
默认情况下,在输入框无论输入字母或数字,都会被当做字符串类型进行处理。(若输入框内容为数字则自动转换成数字类型)
trim
若输入的内容首尾有很多空格,可以使用trim来去除
(可以去除内容左右俩边的空格)
===============================================================
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
<!-- 失去焦点后更新 -->
<input type="text" v-model.lazy='message'>
<h2>{{message}}</h2>
<!-- 内容自动转换number -->
<input type="text" v-model.number='num'>
<h2>{{num}}--{{typeof num}}</h2>
<!-- 去除空格 -->
<input type="text" v-model.trim='str'>
<h2>{{str}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el : '.app' ,
data : {
message : '失去焦点后自动更新' ,
num : 0 ,
str : ''
}
})
</script>
</body>
</html>