6.1 表单控件的基本用法
表达控件在业务中较为常见，比如多选，下拉选择，输入框等，用它们可以完成数据的录入、校验、提交等。Vue.js提供了V-model指令，用于在表单元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。
<body>
<div id='app'>
<input type="=text" v-model="name" placeholder="请输入">
<h1> 你好，{{name}}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
name:''
}
})
</script>
</body>使用v-model之后，表单控件显示的值只能依赖所绑定的数据，不再关心初始化的value属性，对于在<textarea></textarea>之间插入的值，也不会生效。
使用V-model时，如果是用中文输入法输入中文，一般在没有选定词组之前，也就是拼音阶段，Vue是不会更新数据的，当敲下汉字的时候才会触发更新。如果希望总是实时更新，可以用@input来代替V-model，事实上，V-model也是一个特殊的语法糖，只不过他会在不同的表单上智能处理。
<body>
<div id='app'>
<input type="=text" @input="handleInput" placeholder="请输入">
<h1> 你好，{{name}}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
name:''
},methods:{
handleInput:function (e) {
this.name=e.target.value;
}
}
})
</script>
单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为真时选中，为否时不选。
如果是组合实现互斥的效果，就需要v-model配合value来使用。
<body>
<div id="app">
<input type="radio" v-model="gender" value="man" >
<!-- value值很重要，当按钮被选中时，该值将发送给服务器；-->
<label for="man">男</label>
<input type="radio" v-model="gender" value="woman" >
<label for="woman">女</label>
<p>已选：{{gender}}</p><!--如果用原生js实现此功能比较麻烦-->
</div>
<script>
var app=new Vue({
el:'#app',
data:{
gender:''
}
});
</script>
</body>复选框
复选框也分为单独使用和组合使用，不过用法稍与单选不同。复选框单独使用时，也是v-model来绑定一个值。
<body>
<div id="app">
<input type="checkbox" v-model="checked" id="checked" >
<label for="man">男</label>
<br />
<p>已选：{{checked}}</p><!--如果用原生js实现此功能比较麻烦-->
</div>
<script>
var app=new Vue({
el:'#app',
data:{
checked:false
}
});
</script>
</body>组合使用的时候，v-model与value一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数组中，就会选中这一项。这一过程中也是双向的，在勾选时，value的值也会自动push到这个数组中。
<body>
<div id="app">
<input type="checkbox" v-model="checked" value="html" id="html" >
<label for="html">HTML</label>
<br />
<input type="checkbox" v-model="checked" value="js" id="js" >
<label for="js">JavaScript</label>
<br />
<input type="checkbox" v-model="checked" value="css" id="css" >
<label for="css">CSS</label>
<p>已选：{{checked}}</p><!--如果用原生js实现此功能比较麻烦-->
</div>
<script>
var app=new Vue({
el:'#app',
data:{
checked:['html','css']
}
});
</script>
</body>选择列表
选择列表就是下拉选择器，也是常见的表单空间，同样也分为单选和多选两种方式，先看一下单选的示例代码：
<body>
<div id="app">
<select v-model="selected">
<option>html</option>
<option value="js">JavaScript</option>
<option>css</option>
</select>
<p>选择的项是：{{selected}}</p>
<!--<option>是备选项，如果含有value属性，v-model就会优先匹配value的值：如果没有，就会直接匹配<option>的text-->
</div>
<script>
var app=new Vue({
el:'#app',
data:{
selected:'html'
}
});
</script>
</body>给<selectd>添加属性multiple就可以多选了，此时v-model绑定的是一个数组，与复选用法类似，示例代码如下
<body>
<div id="app">
<select v-model="selected" multiple>
<option>html</option>
<option value="js">JavaScript</option>
<option>css</option>
</select>
<p>选择的项是：{{selected}}</p>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
selected:['html','js']
}
});
</script>
</body>·在业务中，<option>经常用v-for动态输出，value和text也是用v-bind来动态输出的，例如：
<body>
<div id="app">
<select v-model="selected" >
<option
v-for="option in options"
:value="option.value">
{{option.text}} </option>
</select>
<p>选择的项是：{{selected}}</p>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
selected:'html',
options:[
{
text:'HTML',
value:'html'
},{
text:'JavaScript',
value:'js'
},
{
text:'CSS',
value:'css'
}
]
}
});虽然用选择列表空间可以很简单地完成下拉选择的需求，但是在实际业务中反而不常用，因为它的样式依赖平台和浏览器，无法统一，也不太美观，功能也受限，比如不支持搜素，所以常见的解决方案是用div模拟一个类似的组件。
绑定值
之前我们介绍的单选按钮，复选框和选择列表在单独使用或单选的情况下，v-model绑定的值是一个静态的字符串或布尔值，但在业务中，有时需要绑定一个动态的数据，这时可以用v-bind来实现。
选择列表的动态绑定
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<select v-model="selected">
<option :value="{number:123}">123</option>
</select>
{{selected.number}}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
selected:''
}
})
</script>
</body>当选中的时候，app.selected是一个Object，所以app.selectde.number===123.
修饰符
在输入框，v-model默认在input时间中同步输入框的数据，使用修饰符.lazy会转变为在change时间中同步，实例代码如下：
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<input type="text" v-model.lazy="message"/>
<p>
{{message}}
</p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:''
}
})
</script>
</body>这个时候，message并不是实时改变的，而是在失去焦点或者按回车时才更新。
.trim修饰符可以自动过滤输入的首尾空格，示例代码如下：
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<input type="text" v-model.trim="message"/>
<p>
{{message}}
</p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:''
}
})
</script>
</body>
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
