Vue学习笔记(4)——表单输入相关

Stars-one 2020年10月22日 165次浏览 本篇字数为3,148字

本文为作者原创,转载请注明出处,谢谢配合
作者:Stars-one
链接:https://stars-one.site/2020/10/22/vue-study-4


Vue中,提供了v-model的指令,让我们可以对表单输入的相关数值进行绑定,当表单元素上使用此指令的时候,此指令会根据控件类型自动选取正确的方法来更新元素

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:

  • text 和 textarea 元素使用 value property 和 input 事件;
  • checkbox 和 radio 使用 checked property 和 change 事件;
  • select 字段将 value 作为 prop 并将 change 作为事件。

输入框与文本域

<div id="app">
	<input type="text" v-model="userName" placeholder="输入姓名">
	<br>
	<br>
	<textarea v-model="desc" placeholder="输入自我介绍">
	</textarea>
</div>

var app = new Vue({
	el: "#app",
	data: {
		userName:"starsone",
		desc:""
	},
});

单选框与复选框

option不设置value属性,则value默认与内容一致

单选框

我们用个简单的男女选择单选框来看看单选框是如何使用v-model的吧

单选框绑定一个字符串或者是数字类型的数据

<div id="app">
	<label>男</label>
	<input name="radio" type="radio" value="男" v-model="sex">
	
	<label>女</label>
	<input name="radio" type="radio" value="女" v-model="sex">
	<br>
	当前性别:{{sex}}
</div>

var app = new Vue({
	el: "#app",
	data: {
		//默认为男(与input的value相同即可),为空则默认都不选
		sex: '男'
	},
});

男女单选框的效果图

单个复选框

单个复选框使用v-model,绑定一个boolean值,可以在JS中定义其默认是勾选还是不勾选

<div id="app">
	<input type="checkbox" id="checkbox" v-model="checked">
	<br>
	<label for="checkbox">是否勾选:{{ checked }}</label>
</div>

var app = new Vue({
	el: "#app",
	data: {
		checked:false
	},
});

单个复选框的效果图

多个复选框

多个复选框,则绑定同一个数组,当用户选择之后,该复选框的value就会被保存在数组中

<div id="app">
	<label>游泳</label>
	<input name="hobby" type="checkbox" value="游泳" v-model="hobbyArray">
	<label>足球</label>
	<input name="hobby" type="checkbox" value="足球" v-model="hobbyArray">
	<label>跑步</label>
	<input name="hobby" type="checkbox" value="跑步" v-model="hobbyArray">
	<br>
	已选:{{hobbyArray}}
</div>

var app = new Vue({
	el: "#app",
	data: {
		//如果想要实现默认勾选,则输入相关复选框的相同的value即可
		//hobbyArray: ['足球']
		hobbyArray: []
	},
});

多个复选框效果图

进阶用法

1.单选框值不固定

单选框的值并不是固定的,可以使用v-bind:value绑定value:

<input type="radio" v-model="pick" v-bind:value="a">

a是定义在Vue的data里的数据

2.复选框不勾选也需要数据

如果多个复选框中,不勾选也是需要它的值,只是值与勾选的值不一样,可以使用下面的true-valuefalse-value属性

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">

true是勾选,false是不勾选

下拉列表选择框

单项选择

与上面单选框一样,绑定一个字符串数据

官方推荐使用disable来默认第一项

<div id="app">
	<select v-model="selected">
		<option disabled value="">请选择</option>
		<option>A</option>
		<option>B</option>
		<option>C</option>
	  </select>
	  <span>已选择: {{ selected }}</span>
</div>

var app = new Vue({
	el: "#app",
	data: {
		selected: ''
	},
});

单项选择框效果图

PS:可以使用v-for来进行列表渲染下拉框的选项

多项选择

多项选择与上述的多选复选框一样,绑定一个数组

<div id="app">
	<select v-model="selected" multiple>
		<option disabled value="">请选择</option>
		<option>A</option>
		<option>B</option>
		<option>C</option>
	</select>
	<span>已选择: {{ selected }}</span>
</div>

var app = new Vue({
	el: "#app",
	data: {
		selected: ''
	},
});

但测试的发现,好像没有多选的效果,官方文档里的示例也是一样,数组里只有一个选项的数据,Bug?

多选框的效果图

进阶用法

可以绑定一个对象

<select v-model="selected">
    <!-- 内联对象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>
// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

补充

修饰符用法

用户注册表单设计(示例)

我们可以设计一个简单的用户注册表单来掌握上述的语法,先来份效果图,为了简单起见,不使用样式了,使用的都是原生

用户注册表单效果图

<div id="app">
	姓名: <input type="text" placeholder="输入姓名" v-model="userName">
	<br>
	性别:
	<label>男</label>
	<input name="radio" type="radio" value="男" v-model="sex">
	<label>女</label>
	<input name="radio" type="radio" value="女" v-model="sex">
	<br>
	自我介绍:
	<textarea v-model="introduction" placeholder="输入自我介绍">
	</textarea>
	<br>
	所在城市:
	<select v-model="city">
		<!-- value不可省略且要为空,之后才会显示"选择城市"这个选项 -->
		<option disabled value="">选择城市</option>
		<!-- 循环遍历 -->
		<option v-for="item in cities" v-bind:value="item">{{item}}</option>
	</select>
	<br>
	爱好:
	<input name="hobby" type="checkbox" value="游泳" v-model="hobbyArray">
	<label>游泳</label>
	<input name="hobby" type="checkbox" value="足球" v-model="hobbyArray">
	<label>足球</label>
	<input name="hobby" type="checkbox" value="跑步" v-model="hobbyArray">
	<label>跑步</label>

	<br>

	<p>我是{{userName}},性别为{{sex}},来自{{city}},我的爱好为{{hobbyArray}},{{introduction}}</p>
</div>

var app = new Vue({
	el: "#app",
	data: {
		userName: "",
		sex: "",
		hobbyArray: [],
		city: "",
		introduction: "",
		//定义选择城市的下拉框选项
		cities:["广州","深圳","北京"]
	},
});

参考

相关标签