在Vue中v-model可以实现双向绑定,最直接的例子就是和表单进行绑定,在接下来的例子都会将v-model和表单进行联系。
什么是双向绑定?双向绑定就是当表单中的数据进行修改,其data中的数据要进行修改,当data中的数据进行修改,标签中的数据也进行了修改。这样了就是双向绑定。
例子1、
<body>
<div id="app">
<input type="text" v-model="message">
<h3>{{message}}</h3>
</div>
</body>
<script src="../JS/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
message:"你好呀",
}
})
</script>
这里将input中的value值和data中的message进行绑定,当在dom中input标签的value发生改变,message也会发生改变。在控制台将message改变,input的值也会发生改变。类比于如果将input标签改为textare也是可以的。
例子2 绑定radio单选框
代码:
<body>
<div id="app">
<label for="male">
<input type="radio" value="男" id="male" v-model="sex">男
</label>
<label for="woman">
<input type="radio" value="女" id="woman" v-model="sex">女
</label>
<h3>您选择的选项是:{{sex}}</h3>
</div>
</body>
<script src="../JS/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
sex:'男',
}
})
</script>
这里将v-model绑定单选标签,可以通过v-model绑定,从而让input和data中的sex进行连接。就是将value和sex进行对比,比较两者值是否相等,如果相等,则该选选择。由于相等的值只有一个,所以可以不用设置name属性,来设置单一项被选择。
例子3 绑定多选框
①
<body>
<div id="app">
<label for="choice">
<input type="checkbox" id="choice" v-model="change">同意协议
</label>
<button v-bind:disabled="!change">下一步</button>
</div>
</body>
<script src="../JS/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
change:"true",
}
})
</script>
这里实现的是将v-model和checkbox来绑定,当该标签被选择时,button可以点击,当该标签没有被选择时,button不可以被点击。
②
<body>
<div id="app">
<input type="checkbox" value="篮球" v-model='hobby'>篮球
<input type="checkbox" value="足球" v-model='hobby'>足球
<input type="checkbox" value="羽毛球" v-model='hobby'>羽毛球
<input type="checkbox" value="乒乓球" v-model='hobby'>乒乓球
<h3>您所选择的运动是:{{hobby}}</h3>
</div>
</body>
<script src="../JS/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
hobby:[],
}
})
</script>
这里设置多选,在data中设置一个数组,将数组传给每一个input。
例子4 v-model绑定select
<body>
<div id='app'>
<select name="abc" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="西瓜">西瓜</option>
<option value="柿子">柿子</option>
</select>
<h3>您所选择的水果是:{{fruit}}</h3>
</div>
</body>
<script src="../JS/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
fruit:'柿子',
}
})
</script>
这里将v-model绑定了select,也可以在select中添加一个mutiple来实现多选操作。
v-model中的修饰符
v-model中的修饰符有lazy和number以及trim。
1. lazy的使用
<body>
<div id="app">
<input type="text" v-model.lazy="message">
<h3>{{message}}</h3>
</div>
</body>
<script src="../JS/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
message:"你好呀"
}
})
</script>
可以理解为懒加载。在前面使用的时候,data中的数据,就会随时跟着输入内容而变化。当加上这个的时候,就会当input失去焦点或者按下回车键的时候,才会更改data中的数据。
2、number的使用
<body>
<div id="app">
<input type="number" v-model.number="message">
<h3>{{typeof(message)}}</h3>
</div>
</body>
<script src="../JS/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
message:1111
}
})
</script>
当使用number是,可以将其转化成数字类型
3、trim
就是将input中value的前后的空格去掉
<body>
<div id="app">
<input type="text" v-model.trim="message">
<h3>{{message}}</h3>
</div>
</body>
<script src="../JS/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
message:'hhhh'
}
})
</script>
v-model到此over。( ´▽` )ノ再见