vue.js中的v-model指令的深刻理解
Posted tea_year
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js中的v-model指令的深刻理解相关的知识，希望对你有一定的参考价值。
vue中经常使用到和这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。
v-model本质上是一个语法糖。如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.target.value">，其中@input是对<input>输入事件的一个监听:value="test"是将监听事件中的数据放入到input，下面代码是v-model的一个简单的例子。在这边需要强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。可以在如下div中加入<p> test</p>获取input数据，然后去修改input中数据会发现<p></p>中数据随之改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<!-- v-bind:属性='变量' 不要
v-model='变量';更多的是用在输入框之类的地方；
输入框可以接受后台(.net/java)都可以给它传值；
同样输入框也可以向后台传递值；这种情况就是双向绑定。
-->
<div id="app">
<input type="text" placeholder="请输入邮箱" v-model="msg">
<input type="radio" value="male" v-model="gender">男
<input type="radio" value="female" v-model="gender">女
<input type="checkbox" v-model="answer" value="A" />A
<input type="checkbox" v-model="answer" value="B" />B
<input type="checkbox" v-model="answer" value="C" />C
<hr>
<select v-model="edu" multiple>
<!--multiple:可以多选-->
<option value="博士">博士研究生</option>
<option value="硕士">硕士研究生</option>
<option value="本科">学士</option>
</select>
邮箱：msg,性别：gender,选择：answer,answer.join('|'),
学历：edu
</div>
<script>
let app = new Vue(
el: "#app",
data:
msg: 'pony.ma',
gender: 'male',
answer: [], //这里需要定义成数组
edu: '本科'
);
</script>
</body>
</html>
案例效果如下：
v-model也可以和.lazy、.trim和.number这些修饰符一起使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<!-- lazy:默认是同步；lazy:当失去焦点onblur的时候，才同步
.number:可以输入字母，输入完毕焦点离开，不能同步效果;
.trim:删除前后空白字符，后面空白字符会把后面的字符给省略掉;
-->
<body>
<div id="app">
非延迟加载:<input type="text" v-model="val1" />
延迟加载:<input type="text" v-model.lazy="val1" />
数字限制：<input type="text" v-model.number="val2" />
空白字符过滤：<input type="text" v-model.trim="val3" />
val1,数字：val2,过滤空白字符val3
</div>
<script>
let app = new Vue(
el: '#app',
data:
val1: 'one',
val2: 2,
val3: ""
);
</script>
</body>
</html>
v-model的修饰符如下所示：
以上是关于vue.js中的v-model指令的深刻理解的主要内容，如果未能解决你的问题，请参考以下文章
Vue.js 源码分析(二十二) 指令篇 v-model指令详解