web前端开发之vue.js:表单的应用

举报
运气男孩 发表于 2020/09/16 19:29:47 2020/09/16
【摘要】 众所周知,表单用于搜集不同类型的用户输入。那么在vue.js是如何应用的呢?表单输入绑定可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。注意:v-mod...

众所周知,表单用于搜集不同类型的用户输入。那么在vue.js是如何应用的呢?

表单输入绑定

以用 v-model 指令在表单 <input><textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。


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

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

  • text 和 textarea 元素使用 value property 和 input 事件;

  • checkbox 和 radio 使用 checked property 和 change 事件;

  • select 字段将 value 作为 prop 并将 change 作为事件。




双向数据绑定图示

image.png

单行文本

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

实现动态数据传输绑定,如图:

image.png

image.png

多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p><br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

image.png

image.png

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>运气男孩test</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>input 元素:</p>
  <input v-model="message" placeholder="编辑我……">
  <p>消息是: {{ message }}</p>
	
  <p>textarea 元素:</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '华为呀',
	message2: '华为官网\r\nhttp://www.huawei.com'
  }
})
</script>
</body>
</html>

image.png

单选按钮

单选按钮的双向数据绑定

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span></div>
new Vue({  el: '#example-4',  data: {    picked: ''
  }
})

image.png

选择框

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

vue

new Vue({  el: '...',  data: {    selected: ''
  }
})

image.png

注意如果 v-model 表达式的初始值未能匹配任何选项,<select> 元素将被渲染为“未选中”状态。在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。

多选时 (绑定到一个数组):

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span></div>
new Vue({  el: '#example-6',  data: {    selected: []
  }
})

image.png


复选框

复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue hauwei</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>单个复选框:</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
	
  <p>多个复选框:</p>
  <input type="checkbox" id="hauwei" value="hauwei" v-model="checkedNames">
  <label for="hauwei">hauwei</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
	checked : false,
    checkedNames: []
  }
})
</script>
</body>
</html>

效果如下:
image.png

select 列表

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <select v-model="selected" name="fruit">
    <option value="">选择一个网站</option>
    <option value="www.hauwei.com">Huawei</option>
    <option value="www.google.com">Google</option>
  </select>
 
  <div id="output">
      选择的网站是: {{selected}}
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
	selected: '' 
  }
})
</script>
</body>
</html>

当我选择huawei时,显示

image.png

修饰符

.lazy

在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:

<!-- 在 "change" 而不是 "input" 事件中更新 --><input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:

<input v-model.number="age" type="number">

这通常很有用,因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

.trim

如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:

<input v-model.trim="msg">


总结实例

HTML

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="form">
  <label for="username">昵称:</label>
  <input type="text" id="username" v-model.trim="username">
  <br>
  <label for="age">年龄:</label>
  <input type="number" id="age" v-model.number="age">
  <br>
  <label for="checkbox">单身:</label>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
  <br>
  <label>喜欢:</label>
  <input type="checkbox" id="huawei" value="huawei" v-model="checkedNames">
  <label for="huawei">huawei</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <br>
<input type="submit" v-on:click="submit"/>
  <br/>
  <br/>
  <span>昵称: {{ username }}</span>
  <br>
  <span>年龄: {{ age }}</span>
  <br>
  <span>单身: {{ checked }}</span>
  <br>
  <span>喜欢: {{ checkedNames }}</span>
</div>

vue.js:

//.number 如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值
//<input v-model.number="age" type="number">
//.trim 如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入
//<input v-model.trim="msg">
	
var vm=new Vue({
  el: '#form',
  data: {
	  //初始值
	  username:'yunqinanhai  ',
	  age:18,
	  checked : false,
      checkedNames: ['huawei']
  },
	methods:{
		//提交表单
		submit:function(){
			var params=new Object();
			params.username=this.username;
			params.age=this.age;
			params.checked=this.checked;
			params.checkedNames=this.checkedNames;
			alert("formdata:"+JSON.stringify(params));
		}
	}
});
	
//vue外部获取vue内部值
console.log(vm.username);
console.log(vm.age);
console.log(vm.checked);
console.log(vm.checkedNames);

效果:

image.png


书山有路勤为径,学海无涯苦作舟!加油!

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。