双向绑定

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.修饰符

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是去掉前后的空白，但是我前后明显各存在一个空格，有人知道怎么回事吗？？？