Vue基础语法之v-model
2019-05-12 本文已影响0人
最底层的技术渣
（普通）
一、js文件内容：
var app = new Vue({
el:'#app',
data:{
name:"Vues",
}
});
二、html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="name">
<span>My name is ：{{ name }}</span>
</div>
</div>
</body>
<script src="lib/js/vue.js"></script>
<script src="asset/js/main.js"></script>
</html>
三、效果展示
四、对比
五、备注：(进阶)
<input type="text" v-model.lazy="name">
{{ name }}
<input type="text" v-model.trim="name">
<pre>{{ name }}</pre>
<input type="text" v-model.number="price">
{{ price }}
/**********************************/
v-model.lazy #惰性事件，不自动更新（一般用于注册时输入完成时验证，可以提高一点点性能） v-model.trim #去除左右两边的空格 v-model.number #将字符串自动转换成整行/**********************************/
# html文件
<div>
<input v-model="sex" type="radio" value="male">男
<input v-model="sex" type="radio" value="female">女
{{sex}}
</div>
<div>
<input v-model="max" type="checkbox" value="male">男
<input v-model="max" type="checkbox" value="female">女
{{max}}
</div>
<div>
<select v-model="sele">
<option value="1">百度</option>
<option value="2">谷歌</option>
<option value="3">搜狗</option>
<option value="4">360</option>
</select>
{{sele}}
</div>
<div>
<select v-model="dest" multiple>
<option value="1">百度</option>
<option value="2">谷歌</option>
<option value="3">搜狗</option>
<option value="4">360</option>
</select>
{{dest}}
</div>
# js文件如下
var vm = new Vue({
el:"#app",
data:{
name:"ok",
price:"10",
sex:"male",
max:["male"],
sele:2,
dest:[]
}
});
除了在input上使用外，也可以在更多的地方使用，比如上方也是常见的
