注：此内容摘抄自：梁灏的《Vue.js实战》
注：记得要引入vue.js才能运行哦，文章中贴出的代码直接复制是不行的，html css js 都放在了一起，而且也没有引用vue.js。
基本用法
1.表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用他们可以完成数据的录入、校验、提交等。Vue.js提供了v-model指令，用于在表单类元素上的双向绑定数据。
<div class="app1"> ???<input type="text" v-model="message" placeholder="输入..." /> ???<p>输入的内容是：{{message}}</p></div>var app1=new Vue({ ???el:‘.app1‘, ???data:{ ???????message:‘‘ ???}});对于文本域textarea也是同样的用法。
2.使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发更新。如果希望总是实时更新，可以用@input代替v-model。事实上，v-model也是一个特殊的语法糖，只不过它会在不同的表单上智能处理。
<div class="app2"> ???<input type="text" @input="handleInput" placeholder="输入..." /> ???<p>输入的内容是：{{message}}</p></div>var app2=new Vue({ ???el:‘.app2‘, ???data:{ ???????message:‘‘ ???}, ???methods:{ ???????handleInput:function(e){ ???????????this.message=e.target.value; ???????} ???}});3.单选按钮
单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为真时选中，为假时不选。
<div class="app3"> ???<input type="radio" name="" id="button1" value="" :checked="picked" /> ???<label for="button1">单选按钮</label></div>var app3=new Vue({ ???el:‘.app3‘, ???data:{ ???????picked:true ???}});如果是组合使用来实现互斥选择效果，就需要v-model配合value来使用：
<div class="app4"> ???<input type="radio" name="" id="html" value="html" v-model="picked" /> ???<label for="html">HTML</label> ???<br /> ???<input type="radio" name="" id="js" value="js" v-model="picked" /> ???<label for="js">JS</label> ???<br /> ???<input type="radio" name="" id="css" value="css" v-model="picked" /> ???<label for="css">CSS</label> ???<br /> ???<p>选择的项是：{{picked}}</p></div>var app4=new Vue({ ???el:‘.app4‘, ???data:{ ???????picked:‘js‘ ???}});4.复选框
复选框也分单独使用和组合使用，不过用法稍与单选不同。复选框单独使用时，也是用v-model来绑定一个布尔值。
<div class="app5"> ???<input type="checkbox" name="checked" id="checked" value="" v-model="checked" /> ???<label for="checked">选择状态：{{checked}}</label></div>var app5=new Vue({ ???el:‘.app5‘, ???data:{ ???????checked:false ???}});组合使用时，也是v-model与value一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数组当中，就会选中这一项。这个过程也是双向的，在勾选时，value的值也会自动push到这个数组中：
<div class="app6"> ???<input type="checkbox" name="" id="html" value="html" v-model="checked" /> ???<label for="html">HTML</label> ???<br /> ???<input type="checkbox" name="" id="js" value="js" v-model="checked" /> ???<label for="js">JS</label> ???<br /> ???<input type="checkbox" name="" id="css" value="css" v-model="checked" /> ???<label for="css">CSS</label> ???<br /> ???<p>选择的项是：{{checked}}</p></div>var app6=new Vue({ ???el:‘.app6‘, ???data:{ ???????checked:[‘html‘,‘css‘] ???}});5.选择列表
选择列表局势下拉选择器，也是常见的表单控件，同样也分为单选和多选两种方式。
<div class="app7"> ???<select name="" v-model="selected"> ???????<option>html</option> ???????<option value="js">JS</option> ???????<option>CSS</option> ???</select> ???<p>选择的项是：{{selected}}</p></div>var app7=new Vue({ ???el:‘.app7‘, ???data:{ ???????selected:‘html‘ ???}});<option>是备选项，如果含有value属性，v-model就会优先匹配value的值；如果没有，就会直接匹配<option>的text，比如选中第二项时，selected的值是js而不是JS。
给<selected>添加属性multiple就可以多选了，此时v-model绑定的是一个数组，与复选框用法类似。（本人觉得太丑了，就不列举了。而且好像只有一开始默认值是多选，然后自己再点击就是单选了）
在业务中，<option>经常用v-for动态输出，value和text也是用v-bind来动态输出的。
<div class="app9"> ???<select name="" v-model="selected"> ???????<option v-for="option in options" :value="option.value">{{option.text}}</option> ???</select> ???<p>选择的项是：{{selected}}</p></div>var app9=new Vue({ ???el:‘.app9‘, ???data:{ ???????selected:‘html‘, ???????options:[ ???????????{ ???????????????text:‘HTML‘, ???????????????value:‘html‘ ???????????}, ???????????{ ???????????????text:‘JavaScript‘, ???????????????value:‘js‘ ???????????}, ???????????{ ???????????????text:‘CSS‘, ???????????????value:‘css‘ ???????????} ???????] ???}})虽然用选择列表<select>控件可以很简单的完成下拉选择的需求，但是在实际业务中反而不常用，因为它的样式依赖平台和浏览器，无法统一，也不太美观，功能也有限，比如不支持搜索，所以常见的解决方案是用div模拟一个类似的控件。
vue.js实战学习——表单与v-model（一）
原文地址：https://www.cnblogs.com/sxdct/p/8193957.html