vue学习笔记3

v-model实例

	<div id="app">
		原始文本：{{message}}
		<br>
		<!-- 数据的双向绑定 -->
		message:<input type="text" v-model="message">
		<!-- 懒加载（当鼠标焦点不在input里面时加载数据） -->
		message.lazy<input type="text" v-model.lazy="message">
		<!-- 只能输入数字（如果一开始输入的不是数字则message.number没有作用） -->
		message.number<input type="text" v-model.number="message">
	
	<br>
	<h3>文本域</h3>
	<!-- cols:宽，rows：高 -->
	<textarea cols="50" rows="10" v-model="message"></textarea>
	
	<h3>多选框绑定一个值</h3>
	<hr>
	<input type="checkbox" v-model="isTrue">
	<!-- 遍历循环 -->
	<label>{{isTrue}}</label>
	<h3>多选框绑定数组</h3>
	<hr>
	<p>
				<!-- value值是要在数组中展示的 -->
		<input type="checkbox" value="苹果" v-model="sss">
		<label>苹果</label>
		<input type="checkbox" value="香蕉" v-model="sss">
		<label>香蕉</label>
		<input type="checkbox" value="橘子" v-model="sss">
		<label>橘子</label>
		<input type="checkbox"  value="鸭梨" v-model="sss">
		<label>鸭梨</label>
	</p>
	<!-- 总是传递数据源 -->
	<span>{{sss}}</span>
	<hr>
	<h3>单选框绑定</h3>
	<input type="radio" value="男" v-model="sex">
	<label >男</label>
	<input type="radio"  value="女" v-model="sex">
	<label >女</label>
	<input type="radio"  value="中" v-model="sex">
	<label >中</label>
	<br>
	您现在选择的性别是:<span>{{sex}}</span>
	</div>

JavaScript

		var app = new Vue({
			el:'#app',
			data:{
				message:'hello world!',
				isTrue:true,
				sss:[],
				sex:'男'
			}
		})