本节知识点
- 双向绑定
概述
- v-model 指令 可以理解为绑定数据源。这样数据源可以实现双向绑定
简易demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{message}}</span>
<input type="text" v-model="message" @focus="clear">
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
message:"默认输出"
},
methods:{
clear:function(){
this.message="";
}
}
})
</script>
</html>
- 这样的结果就是双向绑定，当input输入框发生变化，那么显示的那个框也会发生变化。
修饰符
- v-model.lazy 这个就是懒加载只有当鼠标抬起来的时候他才加载或者变化
- v-model.number 这里就是他必须首先输入数字才能起作用。他会屏蔽掉数字以外的。因为你要是优先输入字母不起作用。
- v-model.trim 这个就是去掉前后的空格
checkbox单选与多选
- 单选
<input type="checkbox" v-model="checkbox">
<label for="">{{checkbox}}</label>
这样选中就是true 没选中就是false
- 多选
<input type="checkbox" v-model="checkbox2" value="天津">天津
<input type="checkbox" v-model="checkbox2" value="北京">北京
<input type="checkbox" v-model="checkbox2" value="上海">上海
<label for="">{{checkbox2}}</label>
- 默认选中的话
data:{
message:"默认输出",
checkbox: true,
checkbox2:["天津"],
radio1: "男"
}
这样默认选中的状态就是天津
checkbox2 类型是数组
radio 元素
<input type="radio" v-model="radio1" value="男"> 男
<input type="radio" v-model="radio1" value="女"> 女
<span>{{radio1}}</span>
- 默认选中的话在data里面,默认选中男
data:{
message:"默认输出",
checkbox: true,
checkbox2:["天津"],
radio1: "男"
}
