六 表单与v-model

本节的主要内容是在vue中关于表单的基础操作，比如单选框，复选框等

6.1 输入框与文本框

v-model 用于表单上进行双向数据绑定

<div id="app" >
        <input type="text" v-model="message" placeholder="请输入">
        <span>输入的内容是：{{message}}</span>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                status: "1",
             },
            data: {
                message: ''
               
            }
        })
    </script>

渲染结果

文本框也是同样的效果

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

6.2 单选框

单选框不用v-model；直接使用 v-bing 绑定 布尔值；

 <div id="app" >
        <input type="radio" :checked="pick">
        <label>单选按钮</label>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                pick: true
               
            }
        })
    </script>

如果组合使用就需要v-model;选择时会将value的值绑定到pick

  <div id="app" >
        <input type="radio" id="jack" value="Jack" v-model="pick">
        <label for="jack">杰克</label>
        <br>
        <input type="radio" id="carrier" value="Carrier" v-model="pick">
        <label for="carrier">卡莉</label>
        <br>
        选择的是：{{pick}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                pick: ''
               
            }
        })
    </script>

页面结果

6.3 复选框

复选框单选时是需要v-model；其绑定的是布尔值；

  <div id="app" >
        <input type="checkbox" id="status"  v-model="pick">
        <label for="status">状态</label>
        选择的是：{{pick}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                pick: false
               
            }
        })
    </script>

渲染结果

多个复选框时；value 会与 v-model 绑定在一起，值也会被推入数组；

<div id="app" >
        <input type="checkbox" id="jack" value="Jack" v-model="pick">
        <label for="jack">杰克</label>
        <br>
        <input type="checkbox" id="carrier" value="Carrier" v-model="pick">
        <label for="carrier">卡莉</label>
        <br>
        选择的是：{{pick}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                pick: []
               
            }
        })
    </script>

渲染结果

6.4 下拉框

单选下拉框时 v-model 会优先匹配 value 的值；如果未给定 value, 则会匹配 option 标签的 text 内容；

<div id="app">
        <select v-model="selected">
            <option>杰克</option>
            <option value="Carrier">卡莉</option>
        </select >
        选择的是：{{selected}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                selected: ''
               
            }
        })
    </script>

渲染结果

多选时 需要在 select 标签上添加 multiple 属性； v-model 绑定的是数组；

  <div id="app">
        <select v-model="selected" multiple>
            <option>杰克</option>
            <option value="Carrier">卡莉</option>
        </select >
        选择的是：{{selected}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                selected: []
               
            }
        })
    </script>

渲染结果

业务中通常是 option 标签和 v-for ， v-bind 联合使用；

 <div id="app">
        <select v-model="selected">
            <option v-for="option in options" :value="option.value">{{option.text}}</option>
        </select >
        选择的是：{{selected}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                selected: '',
                options: [
                    {
                        text: '杰克',
                        value: 'Jack'
                    },
                    {
                        text: '卡莉',
                        value: 'Carrier'
                    }
                ]
               
            }
        })
    </script>

6.5 修饰符

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

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

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

<input v-model.trim="msg">