.lazy 取代 input
监听 change
事件
<textarea rows="" cols="" v-model="value"></textarea>
vue:
new Vue({
el:'#app',
data:{
vue:''
}
})
效果:失焦后其他值再随之改变
.number 输入字符串转为有效的数字,若是字母开头,默认为字符串,则不过滤
<input type="text" v-model.number="value" />
<p>{{value}}</p>
<textarea rows="" cols="" v-model="value"></textarea>
vue:
new Vue({
el:'#app',
data:{
vue:''
}
})
.trim 输入首尾空格过滤
<input type="text" v-model.trim="value" />
<p>{{value}}</p>
<textarea rows="" cols="" v-model="value"></textarea>
vue:
new Vue({
el:'#app',
data:{
vue:''
}
})
vue v-model应用的复选框实例
<!-- 复选框 -->
爱好:<input type="checkbox" v-model="hobby" value="篮球" />篮球
<input type="checkbox" v-model="hobby" value="足球" />足球
<input type="checkbox" v-model="hobby" value="排球" />排球
<p>{{hobby}}</p>
vue:
new Vue({
el:'#app',
data:{
hobby:[],
}
})
效果:
vue v-model应用的单选框实例
<!-- 单选框 -->
<div>
<input type="radio" v-model="sex" value="男" />男
<input type="radio" v-model="sex" value="女" />女
<p>{{sex}}</p>
</div>
vue:
new Vue({
el:'#app',
data:{
sex:'',
}
})
效果:
vue v-model应用下拉列表实例
<!-- 下拉列表 -->
<div>
<select v-model="pro">
<option value ="">请选择</option>
<option value ="css">css</option>
<option value ="html">html</option>
<option value ="php">php</option>
</select>
<p>{{pro}}</p>
</div>
new Vue({
el:'#app',
data:{
pro:'',
}
})
效果: