vue的v-model的使用
一，v-model是什么？
<!-- v-model的使用 -->
<input type="text" v-model="msg">
<h2>{{msg}}</h2>
结果：
输入了 world
二，作用
Vue中使用v-model指令来实现表单元素和数据的双向绑定。监听用户的输入，然后更新数据。
- 因为input中的v-model绑定了msg,所以会实时将输入的内容传递给msg , msg发生改变。
- 当msg发生改变时,因为上面使用了插值语法将msg的值插入到DOM中,所以DOM会发生响应的改变。所以通过v-model实现了双向的绑定。
三，原理
v-model本质上是个语法糖，其实现原理包含两个步骤
- 通过v-bind绑定一个value属性
- 通过v-on指令给当前元素绑定input事件
v-on:input="" 用于动态监听用户输入的信息，在界面上产生一个事件后，浏览器会生成一个event对象，这个event对象就包含了输入的信息
四，类型
除了上面的文本类型，v-model还能结合其他类型使用
1. v-model：radio
<div id="app">
<!--当v-model绑定的是同一个变量，可以不加name属性来实现radio的互斥-->
<label for="right">
<input type="radio" id="right" name="judge" value="对" v-model="judge">对
</label>
<label for="wrong">
<input type="radio" id="wrong" name="judge" value="错" v-model="judge">错
</label>
<h2>你的判断是：{{judge}}</h2>
</div>
<script>
new Vue({
el:'#app',
data:{
judge:'对' //目的：选择之后将值绑定到judge中
}
})
</script>
2. v-model：checkbox
单个复选框
<div id="app">
<label for="ok">
<input type="checkbox" id="ok" v-model="isOk">可以
</label>
<h4>{{isOk}}</h4>
</div>
<script>
new Vue({
el:'#app',
data:{
isOk:false
}
})
</script>
多个复选框
<div id="app">
<input type="checkbox" value="香蕉" v-model="fruits">香蕉
<input type="checkbox" value="苹果" v-model="fruits">苹果
<input type="checkbox" value="梨子" v-model="fruits">梨子
<h4>爱吃的水果是：{{fruits}}</h4>
</div>
<script>
new Vue({
el:'#app',
data:{
fruits:[]
}
})
</script>
结果：
3. v-model：select
<div id="app">
<select name="" id="" v-model="type">
<option value="电影">电影</option>
<option value="动漫">动漫</option>
<option value="电视剧">电视剧</option>
</select>
<h4>喜欢的视频类型是：{{type}}</h4>
</div>
<script>
new Vue({
el:'#app',
data:{
type:'动漫'
}
})
</script>
结果：
五，修饰符
1. lazy
v-model在默认情况下同步了输入框的数据，就是说输入框数据一有改变，对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点之后才更新
<input type="text" v-model.lazy="msg">
2.number
默认情况下，输入框得到的数据最后都会变成字符串形式。number修饰符可以将输入框得到的内容转为数字类型。
<input type="text" v-model.number="msg">
3.trim
trim修饰符可以去掉从输入框获取的内容的左右两边的空格
<input type="text" v-model.trim="msg">
作者：SleepWalkerLj
链接：https://www.jianshu.com/p/41dba59ab8e1
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8">
</script>
<style>
.class1{
background: #444;
color: #eee;
}
</style>
</head>
<body>
<div id="vue_det">
<!-- v-model的使用 -->
<input type="text" v-model.trim="msg">
<h2>{{msg}}</h2>
<input type="radio" v-model="ok" value="true" />对 <br>
<input type="radio" v-model="ok" value="false" />错
<h2>你的选择是{{ok}}</h2>
<input type="checkbox" v-model="flist" value="香蕉" />香蕉
<input type="checkbox" v-model="flist" value="苹果" />苹果
<input type="checkbox" v-model="flist" value="橙子" />橙子
<h2>你的选择是{{flist}}</h2>
<select v-model="type">
<option value="电影">电影</option>
<option value="其他">其他</option>
<option value="漫画">漫画</option>
<option value="小说">小说</option>
</select>
<br>
<h2>你的选择是{{type}}</h2>
<br>
<!-- v-html的使用 -->
<div v-html="site1"></div>
<!-- date的引用{}-->
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<span v-once>这个将不会改变: {{ msg }}</span>
<h1>{{details()}}</h1>
<p title="1,2,3">content</p>
<!-- v-bind的HTML 属性中的值应使用 v-bind 指令。
以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类： -->
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
<!-- js的语法 -->
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
type:"其他",
flist: [],
ok: true,
message: 'RUNOOB',
msg: 'RUNOOB',
site1: "<h1>菜鸟教程</h1>",
site: "菜鸟教程",
url: "www.runoob.com",
alexa: "10000",
use: false,
},
methods: {
details: function ( ) {
return this.site + this.url+this.alexa+ " - 学的不仅是技术，更是梦想！";
}
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号