1.v-model的基本使用
在默认情况下,v-model是在input事件中同步输入框的数据
界面改变 数据也改变 把界面上的value传过去
<div id="app">
<input type="text" v-model="message">
</div>
</body>
<script>
const app = new Vue({
el:"#app",
data:{
message:'2345yu'
}
})
</script>
2.v-model的原理
背后包含两个指令
div id="app">
<input type="text" :value="message" @input="valueChange">
<input type="text" :value="message" @input="messge = $ event.target.value">
</div>
</body>
<script>
const app = new Vue({
el:"#app",
data:{
message:'2345yu'
},
methods:{
valueChange(){
this.message = event.target.value;
}
}
})
</script>
2.v-model结合radio类型
单选圈圈
<div id="app">
<label foe="male">
//label :没有label 只能点框 有label 可以点后面的字
<input type="radio" id="male" name="sex" value="男" v-model="sex">男
</label >
<label foe="female">
<input type="radio" id="female" name="sex" value="女" v-model="sex">女
//name一样的时候 radio为单选 若绑定同样的v-model 也互斥
</label >
</div>
</body>
<script>
const app = new Vue({
el:"#app",
data:{
message:'2345yu',
sex:''
}
})
</script>
3.v-model结合checkbox类型
checkbox:复选框(单个勾选框和多个勾选框)
<div id="app">
<!--------------------checkbox单选框----------------------------->
<label for="male">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</label >
<!--------------------checkbox多选框----------------------------->
<label for="male">
<input type="checkbox" id="agree" value="篮球" v-model="hobbies">篮球
<input type="checkbox" id="agree" value="足球" v-model="hobbies">足球
<input type="checkbox" id="agree" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" id="agree" value="羽毛球" v-model="hobbies">羽毛球
</label >
</div>
</body>
<script>
const app = new Vue({
el:"#app",
data:{
message:'2345yu',
isAgree:false, //默认false时,未选中
hobbies:[]//选中哪个,value进来哪个 可以多个
},
})
</script>
4.v-model 结合select类型使用
<div id="app">
<!--选择一个-->
<select name="abc" id="1" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="西瓜">西瓜</option>
<option value="太郎">太郎</option>
</select>
<!--选择多个 multiple 加上按住Ctrl可多选-->
<select name="abc" id="2" v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="西瓜">西瓜</option>
<option value="太郎">太郎</option>
</select>
</div>
</body>
<script>
const app=new Vue({
el:"#app",
data:{
fruit:"香蕉", //下拉框默认选择香蕉
fruit:[]
}
})
</script>
5.v-model修饰符的使用
- lazy修饰符
可以让数据在失去焦点的时候或者敲击回车的时候才会更新数据
<input type="text" v-model.lazy="fruits">
- number修饰符
输入框输入值默认类型为字符串 .number强行转化为数字类型
<input type="text" v-model.number="fruits">
- trim修饰符
输入内容为收尾有空格,我们希望把他去除 trim可过滤两边空格
<input type="text" v-model.trim="fruits">