欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue学习笔记3

程序员文章站 2022-03-29 13:57:40
...

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:'男'
			}
		})



相关标签: 笔记