1.5 Vue 表单处理

1. 基础用法

文本输入绑定

使用v-model和{{}}实现对表单元素的双向数据绑定

• 单行文本

  <input v-model="message" placeholder="输入">
  

• 多行文本

  <textarea v-model="message" placeholder="输入"></textarea>
  

2. 绑定值

选择性框输入绑定值

需要动态数据时，使用v-bind绑定

• 单选按钮

  <input type="radio" id="one" :value='value' v-model="picked">
  

• 复选框

  <input type="checkbox" id="checkbox" v-model="checked" :true-value='value1' :false-value='value2'>
  

• 下拉选择

  <select v-model="selected">
      <option disabled value="">请选择</option>
      <option :value='{number:123}'>123</option>
  </select>
  

3. 修饰符

常用修饰符可以控制数据同步的时机

常用修饰符

• v-model.lazy 从input事件中转变为在 change 事件中同步数据
• v-model.number 可以将输入转换为 Number类型
• v-model.trim 可以自动过滤输入的首尾空格

demo

    <div id="app">
        <h4>文本框</h4>
        <!-- change事件是等光标失去焦点之后才会触发，而input事件是实时触发的 -->
        <input type="text" v-model="message" @change="changeInput" @input="updateInput">
        <br>
        <br>
        <textarea v-model="message"></textarea>
        <hr>
        <h4>单选框</h4>
        <input type="radio" name="radio" value="1" v-model="param"><label for="">苹果</label>
        <input type="radio" name="radio" value="2" v-model="param"><label for="">雪梨</label>
        <p>{{param}}</p>
        <hr>
        <h4>复选框</h4>
        <input type="checkbox" v-model="checkVal" :true-value="trueValue" :false-value="falseValue">
        <p>{{checkVal}}</p>
        <hr>
        <h4>下拉选框</h4>
        <!-- multiple 多选 ctrl+鼠标单击-->
        <select v-model="selected" multiple>
            <option value="">请选择</option>
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
        <p>{{selected}}</p>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
    let app = new Vue({
        el: '#app',
        data: {
            message: '我是message初始值',
            param: '1',
            checkVal: '',
            trueValue: '1',
            falseValue: '2',
            selected: []
        },
        methods: {
            changeInput(e){
                console.log('changeInput', e)
            },
            updateInput(e){
                console.log('updateInput', e)
            }
        }
    })
    </script>