双向绑定
1.v-model
将视图上的数据绑定到Vue对象上。
效果图：
代码：
<div id="div1">
你叫啥：<input type="text" v-model="name" />
<!--拿到name的值，可以看到改变上面文本框中的文字name随即发生变化-->
<div>{{name}}，上酸菜！</div>
<!--<button @click="onclick">点我</button>-->
</div>
<script>
new Vue({
el:"#div1",
data:{
name:"翠花"
},
// methods:{
// onclick:function(){
// alert(this.name);
// }
// }
})
</script>2.多种数据风格的绑定
效果图：
代码：
<style>
table tr th,
table tr td {
border: 1px solid gray;
text-align: center;
height: 40px;
}
table {
border-collapse: collapse;
width: 600px;
}
thead {
background-color: aquamarine;
}
</style>
<div id="div1">
<table>
<thead>
<tr>
<td>类型</td>
<td>默认值</td>
<td>绑定值</td>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td><input type="text" v-model="text" placeholder="随便输个啥"></td>
<td>{{text}}</td>
</tr>
<tr>
<td>textarea</td>
<td><textarea v-model="textarea" placeholder="随便输个啥"></textarea></td>
<td>{{textarea}}</td>
</tr>
<tr>
<td>radio</td>
<td>
<input type="radio" name="number" value="0" v-model="radio">zero
<input type="radio" name="number" value="1" v-model="radio">one
<input type="radio" name="number" value="2" v-model="radio">two
</td>
<td>{{radio}}</td>
</tr>
<tr>
<td>checkbox1</td>
<td><input type="checkbox" value="0" name="zzz" v-model="checkbox1">噢</td>
<td>{{checkbox1}}</td>
</tr>
<tr>
<td>checkbox2</td>
<td>
<input type="checkbox" name="color" value="0" v-model="checkbox2">red
<input type="checkbox" name="color" value="1" v-model="checkbox2">green
<input type="checkbox" name="color" value="2" v-model="checkbox2">blue
<td>{{checkbox2}}</td>
</tr>
<tr>
<td>select</td>
<td>
<select v-model="select">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
<td>{{select}}</td>
</tr>
<tr>
<td>select1(通过ctrl或者shift进行多选)</td>
<td>
<select v-model="select1" multiple="multiple">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
<td>{{select1}}</td>
</tr>
<tr>
<td>单个复选框</td>
<td>
默认值是true或者false,也可以修改为自定义的值<br>
<input type="checkbox" id="toggle" true-value="yes" false-value="no" v-model="toggle">
</td>
<td>{{ toggle }}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: "#div1",
data: {
text: "",
textarea: "",
radio: "",
checkbox1: [],
checkbox2: [],
// checkbox1: "[]",
// checkbox2: "[]",注意：这样写拿到的是true or false,不是value值，并且多选框只能不选或者全选
select: "",
select1: "",
toggle:"",
}
})
</script>3.修饰符
扫描二维码关注公众号，回复：
3047945 查看本文章
vue.js 还提供了一些修饰符方便用户操作，常见的有:
.lazy
.number
.trim
接下来一一举例说明
(1)修饰符 .lazy
对于输入元素，默认的行为方式是一旦有数据变化，马上进行绑定。但是加上.lazy之后，相当于监听change操作，只有在失去焦点的时候，才会进行数据绑定了。
效果图：
代码：
<div id="div1">
<input type="text" v-model="text1"/>{{text1}}
<br><br>
<input type="text" v-model.lazy="text2"/>{{text2}}
</div>
<script>
new Vue({
el:"#div1",
data:{
text1:"",
text2:"",
}
})
</script>(2) 修饰符 .number
v-model默认是string类型，所以就可以通过.number方式确保获取到的是数字类型。
(一次可以同时使用多个修饰符，比如number3)。
效果图：
代码：
<div id="div1">
number1:<input type="number" v-model="number1"/>{{number1}}
<br>
number1的类型：{{typeof number1}}
<br><br>
number2:<input type="number" v-model.number="number2"/>{{number2}}
<br>
number12类型：{{typeof number2}}
<br><br>
number3:<input type="number" v-model.number.lazy="number3"/>{{number3}}
<br>
number13类型：{{typeof number3}}
</div>
<script>
new Vue({
el:"#div1",
data:{
number1:"",
number2:"",
number3:"",
}
})
</script>（3）修饰符 .trim
trim 的作用是去掉前后的空白。
效果图：
代码：
<div id="div1">
<input type="text" v-model.tirm="text"/> "{{text}}"
</div>
<script>
new Vue({
el:"#div1",
data:{
text:"",
}
})
</script>这里有个问题：.trim是去掉前后的空白，但是我前后明显各存在一个空格，有人知道怎么回事吗？？？