v-model在表单中的便捷应用

官网的教程中，大家都知道v-model实现双向数据绑定时用于input/textarea起到实时监听数据效果，除了这以外，在radio、checkbox的使用上，那也是真的香。

• 复选框

<div id="app">
    {{isChecked}}
    <input type="checkbox" v-model="isChecked">
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            isChecked: false
        }
    })
</script>

• 多选数据的添加

<div id="app">
    <p>{{checkedItem}} </p>
    <label><input type="checkbox" value="苹果" v-model="checkedItem">苹果</label>
    <label><input type="checkbox" value="香蕉" v-model="checkedItem">香蕉</label>
    <label><input type="checkbox" value="凤梨" v-model="checkedItem">凤梨</label>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            checkedItem: []
        }
    })
</script>

由此可见，每次表单元素触发的时候，v-model接收了表单元素的value值返回给绑定的属性。

• 单选框

<div id="app">
    <p>我要吃：{{radioItem}}</p>
    <label><input type="radio" name="fruit" value="苹果" v-model="radioItem">苹果</label>
    <label><input type="radio" name="fruit" value="香蕉" v-model="radioItem">香蕉</label>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            radioItem: ''
        }
    })
</script>

• select选择框

  

<div id="app">
  <p>当前选中的是：{{selected}}</p>
  <select name="" id="" v-model="selected">
    <option v-for="(item, index) in options" :key="index" :value="item">{{item}}</option>
  </select>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            selected: '上海',
            options: ['北京', '上海', '深圳']
        }
    })
</script>

另外，v-model除了值绑定，还提供了一些修饰符的便捷方法

• .lazy

  

  如效果，它不是实时显示结果，而是当输入框失去焦点后，显示结果

<div id="app">
    <p>{{lazyText}}</p>
    <input type="text" v-model.lazy="lazyText">
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            lazyText: 'hello world',
        }
    })
</script>

• .trim

<div id="app"> 
    {{trimText}}
    <input type="text" v-model.trim="trimText">
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            trimText: '    去除字符前后的空格符   ',
        }
    })
</script>

• .number

绑定数值内容为数字，非数字则自动过滤

<p>
    {{numText}}
</p>
<input type="text" v-model.number="numText">
<script>
    new Vue({
        el: '#app',
        data: {
            numText: '11',
        }
    })
</script>