web前端开发之vue.js：表单的应用
【摘要】 众所周知，表单用于搜集不同类型的用户输入。那么在vue.js是如何应用的呢？表单输入绑定可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。注意：v-mod...
众所周知，表单用于搜集不同类型的用户输入。那么在vue.js是如何应用的呢？
表单输入绑定
可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意：v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
text 和 textarea 元素使用
valueproperty 和input事件；checkbox 和 radio 使用
checkedproperty 和change事件；select 字段将
value作为 prop 并将change作为事件。
双向数据绑定图示
单行文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
实现动态数据传输绑定，如图：
多行文本
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p><br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
实例
<!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>
单选按钮
单选按钮的双向数据绑定
<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: ''
}
})
选择框
<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: ''
}
})
注意：如果 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: []
}
})
复选框
复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：
<!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>
效果如下：
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时，显示
修饰符
.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);
效果：
书山有路勤为径，学海无涯苦作舟！加油！
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）