本篇文章给大家分享的是关于对vue中表单输入绑定和组件基础的分析，有需要的朋友可以参考一下。
目标：
熟练掌握vue中表单的处理方式
对之前学习的内容简单回顾一下，并写一个实例，学以致用（最好脱离文档）
vue中表单的处理方式vue中表单的处理使用了v-model指令, 这个指令可以直接把一个数据绑定到表单元素中的value,checked,selected特性,同时这些特性也会被忽略掉初始值,而总是将vue实例的数据作为数据来源.
使用了v-model之后4750256ae76b6b9d804861d8f69e79d340587128eee8df8f03d0b607fe983014之间的插值就不会有效了,会被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>
相关推荐：
对vue中事件处理的分析
vue中class与style绑定以及条件与列表渲染的分析
以上就是对vue中表单输入绑定和组件基础的分析的详细内容。