1.v-model一般用于表单中绑定一个变量，在js中变量的值变化时表单中的值也变化，页面上改变表单中的值时js中绑定的变量的值也变化。
<template>
<div>
<input type="text" v-model="msg">//双向绑定
<br>
<input type="text" :value="msg">//单向绑定，只有js中对象值变化时界面中input中的值变化，但是在页面上改变input中的值时msg的值不会变化
<br>
{{msg}}
</div>
</template>
<script>
export default {
name:"App",
data:function(){
return {
msg:'this is test'
};
},
computed:{
},
methods:{
}
}
</script>
<style scoped>
</style>
2.v-mode也有修饰符
.layz：<input type="text" v-model.lazy="msg">//在页面的input中输入值后再按回车健才会导致msg变量的值变化
.number：input框中值变化时msg的类型转换为number类型，默认时string
.trim：赋值msg的时候会自动删除input框中输入的前后的空格
3.单选框中使用v-model双向绑定
<template>
<div>
<label for="one">
<input id="one" type="radio" name="sex" value="男" v-model="sex">男
</label>
<label for="two">
<input id="two" type="radio" name="sex" value="女" v-model="sex">女
</label>
<br>
{{sex}}
</div>
</template>
<script>
export default {
name:"App",
data:function(){
return {
sex:'男'
};
},
computed:{
},
methods:{
}
}
</script>
<style scoped>
</style>
4.单个checkbox中v-model获取是否选中
<template>
<div>
<input type="checkbox" v-model="isAgree">同意协议{{isAgree}}
</div>
</template>
<script>
export default {
name:"App",
data:function(){
return {
isAgree:false
};
},
computed:{
},
methods:{
}
}
</script>
<style scoped>
</style>
5.多选框中v-model双向绑定，获取选中的选项为一个数组
<template>
<div>
<label for="a">
<input id="a" type="checkbox" value="篮球" v-model="tags">篮球
</label>
<label for="b">
<input id="b" type="checkbox" value="吉他" v-model="tags">吉他
</label>
<label for="c">
<input id="c" type="checkbox" value="漫画" v-model="tags">漫画
</label>
<label for="d">
<input id="d" type="checkbox" value="代码" v-model="tags">代码
</label>
<br>
{{tags}}
</div>
</template>
<script>
export default {
name:"App",
data:function(){
return {
tags:['篮球']//默认选项
};
},
computed:{
},
methods:{
}
}
</script>
<style scoped>
</style>
6.下拉列表中使用v-model。如果是下拉多选select中加入multiple属性，对应绑定的model对象设置为数组即可。
<template>
<div>
<select v-model="tag">
<option value="篮球">篮球</option>
<option value="漫画">漫画</option>
<option value="吉他">吉他</option>
<option value="代码">代码</option>
</select>
<br>
{{tag}}
</div>
</template>
<script>
export default {
name:"App",
data:function(){
return {
tag:'篮球'
};
},
computed:{
},
methods:{
}
}
</script>
<style scoped>
</style>