您的当前位置：首页对Vue中表单输入绑定和组件基础的分析

对Vue中表单输入绑定和组件基础的分析

来源：欧得旅游网

本篇文章给大家分享的是关于对Vue中表单输入绑定和组件基础的分析，有需要的朋友可以参考一下。

目标：

熟练掌握vue中表单的处理方式
对之前学习的内容简单回顾一下，并写一个实例，学以致用（最好脱离文档）

vue中表单的处理方式

vue中表单的处理使用了v-model指令, 这个指令可以直接把一个数据绑定到表单元素中的value,checked,selected特性,同时这些特性也会被忽略掉初始值,而总是将vue实例的数据作为数据来源.
使用了v-model之后<textarea></textarea>之间的插值就不会有效了,会被v-model代替.

双向绑定(v-model)

1.绑定value: text,textarea(字符串)
text:

<input v-model="message" placeholder="edit me">

textarea:

<textarea v-model="message" placeholder="add multiple lines"></textarea>

2.绑定checked: checkout(单个绑定布尔值,多个绑定字符串数组), radio(字符串)
checkout(单个):

<input type="checkbox" id="checkbox" v-model="checked">

checkout(多个):

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>

radio:

<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>

3.绑定selected: select(字符串)

<select v-model="selected">
 <option disabled value="">请选择</option>
 <option>A</option>
 <option>B</option>
 <option>C</option>
</select>

修饰符(用在v-model指令上)

.lazy: 触发的事件不一样,使用change触发,而不是input触发
.number: 自动转为数字类型
.trim:自动过滤后卫空白符号

例子

form.html

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>表单输入绑定</title>
 <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
 <p id="app">
 <form>
 <!-- 文本 -->
 <input type="text" v-model="formData.textValue">{{formData.textValue}}<br>
 <textarea v-model="formData.textareaValue"></textarea>{{formData.textareaValue}}<br>
 <!-- checkout(单个) -->
 <input type="checkbox" id="checkbox" v-model="formData.isChecked"><label for="checkbox">点我啊</label><br>
 <!-- 多个多选 -->
 <input type="checkbox" id="haha" value="haha" v-model="formData.checkedValues">
 <label for="haha">哈哈</label>
 <input type="checkbox" id="hoho" value="hoho" v-model="formData.checkedValues">
 <label for="hoho">呵呵</label>
 <input type="checkbox" id="hihi" value="hihi" v-model="formData.checkedValues">
 <label for="hihi">嘻嘻</label>
 <br>
 多选选中的是<span v-for="value of formData.checkedValues"> {{value}} </span>
 <br>
 <!-- 单选 -->
 <input type="radio" id="one" value="one" v-model="formData.pickedValue">
 <label for="one">one</label>
 <input type="radio" id="two" value="two" v-model="formData.pickedValue">
 <label for="two">two</label>
 <input type="radio" id="three" value="three" v-model="formData.pickedValue">
 <label for="three">three</label>
 <br>
 单选选中的是<span> {{formData.pickedValue}} </span>
 <br>
 <!-- 下拉选择框 -->
 <select v-model="formData.selectedValue">
 <option disabled value="">请选择</option>
 <option>A</option>
 <option>B</option>
 <option>C</option>
 </select>
 <br>
 下拉选择框选中的是<span> {{formData.selectedValue}} </span>
 <br>
 <a @click="submitForm">提交</a>
 </form>
 </p>
</p>
<script>
 var vm = new Vue({
 el: '#app',
 data: {
 formData: {
 textValue: '',
 textareaValue: '',
 isChecked: true,
 checkedValues: [],
 pickedValue:'',
 selectedValue: ''
 },
 msg: '这是一句消息'
 },
 methods: {
 submitForm: function(){
 for(var key in this.formData) {
 obj[key] = this.formData[key];
 }
 console.log(this.formData);
 console.log(this.msg);
 }
 }
 });
</script>
</body>
</html>