v-model: 用于表单元素上的双向数据绑定
基本用法
<div id="app">
<input type="text" v-model="message" placeholder="输入...">
<p>输入的内容是: {{ message }}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:''
}
})
</script>
单选按钮
<div id="app">
<input type="radio" :checked="picked">
<label for="">单选按钮</label>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
picked:true
}
})
</script>
互斥单选按钮(v-model配合value,当sex的值等于value时,此项被选中)
<div id="app">
<input type="radio" v-model="sex" value="男" id="1">
<label for="1">男</label>
<input type="radio" v-model="sex" value="女" id="2">
<label for="2">女</label>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
sex:"男"
}
})
</script>
复选框
<!--单个复选框-->
<!--当复选框选中时, checked等于true, 未选中时, checked等于false; 反之一样-->
<div id="app">
<input type="checkbox" v-model="checked" id="agree">
<label for="agree">同意</label>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
checked:false
}
})
</script>
<!--多个复选框-->
<!--v-model 配合 value使用-->
<!--单个复选框-->
<div id="app">
<template v-for="(item,index) in loves" >
<input type="checkbox" v-model="love" :value="item" :id="index">
<label :for="index">{{ item }}</label>
</template>
<p>你的love是: {{ love.join()}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
love:[],
loves:["run","swim","football"]
}
})
</script>
选择列表
<!--单选-->
<!--option是被选项,如果含有value属性. v-model就会优先匹配value的值;
如果没有,就会直接匹配option的text.-->
<div id="app">
<select v-model="opt"><!--opt的值是选中项的value的值-->
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
<p>你的选择是: {{ opt }}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
opt:"js" //默认选择value等于js的项
}
})
</script>
<!--多选下拉选择列表-->
<script>
var app= new Vue({
el:"#app",
data:{
opt:[ ]
}
})
</script>
修饰符
.lazy:
.number:
.trim:
<input v-model.lazy="uname">
<input v-model.number="uname">
<input v-model.trim="uname">