一、基本用法
v-model
指令在表单 、 及 元素上创建双向数据绑定。
<div id="app">
<input type="" v-model="message" placeholder="输入..." />
<p>输入的内容是:{{message}}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
对于文本域textarea 也是同样的用法:
<input type="" v-model="text" placeholder="输入..."/>
<p style="white-space :pre">{{text}}</p>
单选按钮
单选按钮在单独使用时。不需要v-model, 直接使用v-bind 绑定一个布尔类型的值,为真选中,为否时不选
<div id="app">
<input type="radio" :checked="picked" />
<label for="">单选按钮</label>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
picked:true
}
})
</script>
如果是组合使用来实现互斥选择的效果,就需要v-model 配合value 来使用
<div id="app">
<input type="radio" v-model="picked" value="html" id="html" />
<label for="html">Html</label>
<br />
<input type="radio" v-model="picked" value="js" id="js" />
<label for="js">js</label>
<br />
<input type="radio" v-model="picked" value="css" id="css" />
<label for="css">Css</label>
<p>选择的项是 :{{picked}}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
picked: 'css'
}
})
</script>
复选框
分为单独使用和复使用,单独使用时也使用v-model来绑定一个布尔值。
<input type="checkbox" v-model="checked" id="checked" />
<label for="checked">选择状态:{{checked}}</label>
多选框组合使用
<div id="app">
<input type="checkbox" v-model="checked" value= "html" id="html"/>
<label for="html">Html</label>
<br />
<input type="checkbox" v-model="checked" value= "js" id="js"/>
<label for="js">js</label>
<br />
<input type="checkbox" v-model="checked" value="css" id="css" />
<label for="css">Css</label>
<p>选择的项是 :{{checked}}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
checked:['html','css']
}
})
</script>
选择列表:分为单选和多选
<select v-model="selected">
<option>html</option>
<option>css</option>
<option>js</option>
<p>选择的项是:{{selected}}</p>
</select>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
selected:'html'
}
})
</script>
给添加属性 multiple 就可以多选了,此时v-model 绑定的是一个数组。
<select v-model="selected" multiple>//添加multiple 可以多选
<script type="text/javascript">
new Vue({
el: '#app',
data: {
selected:['html','js']//绑定的是一个数组
}
})
</script>
二、绑定值
绑定一个动态数据可以用v-bind来实现
单选
<div id="app">
<input type="radio" v-model="picked" :value="value" />
<label for="">单选按钮</label>
<p>{{ picked }}</p>
<p>{{ value }}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
picked:false,
value: 123
}
})
</script>
再选中时,app.picked === app.value, 值都是123
复选框
扫描二维码关注公众号,回复:
5456491 查看本文章
勾选时,app.toggle=app.value1;未勾选时,app.toggle=app.value2
<div id="app">
<select v-model="selected">
<option :value="{number:123}">123</option>
</select>
{{selected.number}}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
selected:''
},
})
</script>
当选中时,app.selected 是一个Object,所以app.selected.number === 123
三、修饰符
v-model 也有修饰符,用于控制数据同步的时机
.lazy:
在输入框中,v-model默认是在input事件中同步输入框的数据(除中文外),使用.lazy修饰符会在change事件中同步。
<div id="app">
<input type="text" v-model.lazy="message">
<p>输入的内容为:{{message}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:''
}
})
</script>
这时,message不是实时改变的,只在失去焦点或者回车才更新。
.number
使用.number可以将输入转换为Number类型,否则虽然你输入的是数字,但它的类型依然是String。
.trim:
修饰符.trim可以自动过滤首尾空格。
<div id="app">
<input type="text" v-model.trim="message">
<p>{{message}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:''
}
})
</script>