三、vue基础--表单绑定

表单输入绑定：可以一起使用以下修饰符，都是在v-model里面使用的，有input,radio,textrea,select中都可以使用绑定
1.单选按钮，代码如下：

<div id='app'>
    <div>
　　　　<input type="radio" value="One" v-model="picked">
　　　　<label for="one">One</label>
　　　　<br>
　　　　<input type="radio" value="Two" v-model="picked">
　　　　<label for="two">Two</label>
　　　　<br>
　　　　<span>选中的是:{{picked}}</span>
　　</div>
</div>
<script>
　　new Vue({
　　　　el:'#app',
　　　　data:{
　　　　　　picked:""
　　　　}
　　})
</script>

2.多选按钮，代码如下：

<div id='app'>
　　<div>
　　　　<input type="checkbox" value="吃饭" v-model="checkdNames">
　　　　<label for="吃饭">吃饭</label>
　　　　<input type="checkbox" value="睡觉" v-model="checkdNames">
　　　　<label for="睡觉">睡觉</label>
　　　　<input type="checkbox" value="打豆豆" v-model="checkdNames">
　　　　<label for="打豆豆">打豆豆</label>
　　　　<br>
　　　　<span>选中的值是：{{checkdNames}}</span>
　　</div>
</div>
<script>
　　new Vue({
　　　　el:'#app',
　　　　data:{
　　　　　　checkdNames:[],
　　　　}
　　})
</script>

3.下拉框，代码如下： <option value="1">A</option>，有value显示就是value的值，没有显示A

<div id='app'>
　　<div>
　　　　<select v-model="selected">
　　　　　　<option disabled value="">请选择</option>
　　　　　　<option value="1">A</option>
　　　　　　<option>B</option>
　　　　　　<option value="3">C</option>
　　　　</select>
　　　　<span>你选的答案是：{{selected}}</span>
　　</div>
</div>
<script>
　　new Vue({
　　　　el:'#app',
　　　　data:{
　　　　　　selected:""
　　　　}
　　})
</script>

4.修饰符：
.lazy 输入框失去焦点的时候显示输入的内容，代码如下：

<input type="text" v-model.lazy="massage">

.number 只能输入数值类型，输入别的自动删除掉。代码如下：

<input type="text" v-model.number="number">

.trim 输入的文字的前后去掉空格，代码如下：

<input type="text" v-model.trim="number">