vuejs笔记之表单元素(v-model.修饰符)

责编:menVScode 2017-09-30 21:53 阅读(1091)

单选按钮:选中就能获取其对应的value值;

<div id="app">
	<input type="radio" value="one" v-model='a' />
	<input type="radio" value="two" v-model='a' />
	<p>{{ a }}</p>
</div>
var app = new Vue({
	el:'#app',
	data:{
		a:''
	}
});

GIF


单个复选按钮:选中的时候为true,反之false。

<div id="app">
	<input type="checkbox" value="checkbox" v-model='b' />
	{{ b }}
</div>
var app = new Vue({
	el:'#app',
	data:{
		b:''
	}
});

GIF


多个复选按钮:v-model绑定同一个数据,且类型是数组;

<div id="app">
	<input type="checkbox" value="one" v-model='a' />
	<input type="checkbox" value="two" v-model='a' />
	<input type="checkbox" value="three" v-model='a' />
	<p>{{ a }}</p>
</div>
var app = new Vue({
	el:'#app',
	data:{
		a:[]
	}
});

GIF


下拉选框

<div id="app">
	<select v-model='a'>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
	<p>{{ a }}</p>
</div>
var app = new Vue({
	el:'#app',
	data:{
		a:''
	}
});

GIF


具有multiple属性的下拉选框

<div id="app">
	<select v-model='a' multiple>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
	<p>{{ a }}</p>
</div>
var app = new Vue({
	el:'#app',
	data:{
		a:[]
	}
});

GIF


修饰符:lazy

v-model.lazy=' ':失去焦点的时候,显示内容;

<div id="app">
	<input type="text" v-model.lazy='a'>
	<p>{{ a }}</p>
</div>
var app = new Vue({
	el:'#app',
	data:{
		a:''
	}
});

GIF

修饰符:trim

v-model.trim=' ':去掉数据首尾的空格

<div id="app">
	<input type="text" v-model.trim='a'>
	<p>{{ a }}</p>
</div>
var app = new Vue({
	el:'#app',
	data:{
		a:''
	}
});

GIF

修饰符:number

<input type="text" v-model.number='a'>

将输入的数字由字符串类型转化为number类型。

标签: v-model vuejs
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码