Vue 学习笔记 8 —— 表单输入绑定

1. 基础用法

使用 v-model 对表单元素创建双向数据绑定，表单元素包括 input、textarea 和 select。

需要注意的是，v-model 会忽略所有表单元素的初始 attribute 值，因此在 Vue 实例中需要声明初始值。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

# 文本

v-model 将 input 标签的 value 与 content 绑定在一起：

<div id="app">
    <input v-model="content" placeholder="edit me">
    <p>content: {{content}}</p>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            content: ''
        }
    })
</script>

let vm = new Vue({
    el: "#app",
    data: {
        content: ''
    }
})

# 复选框

将多个复选框中被 checked 的元素的 value 绑定到同一个数组：

<div id="app">
    <input type="checkbox" id="a" value="A" v-model="checkedItems">
    <label for="a">A</label>
    <input type="checkbox" id="b" value="B" v-model="checkedItems">
    <label for="b">B</label>
    <input type="checkbox" id="c" value="C" v-model="checkedItems">
    <label for="c">C</label>
    <p>cheked items are: {{checkedItems}}</p>
</div>

let vm = new Vue({
    el: "#app",
    data: {
        checkedItems: []
    }
})

# 单选按钮

将单选按钮中被 checked 的元素的 value 绑定到变量：

<div id="app">
    <input type="radio" id="b" value="boy" v-model="picked"> boy
    <input type="radio" id="g" value="girl" v-model="picked"> girl
    <br>
    <p>{{picked}} is picked.</p>
</div>

let vm = new Vue({
    el: "#app",
    data: {
        picked: ''
    }
})

# 下拉选择框

v-model 将被选择的元素的 value 绑定到变量或数组：

<div id="app">
    <select v-model="selected"
            style="width: 60px;">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <p>{{selected}}</p>
</div>

let vm = new Vue({
    el: "#app",
    data: {
        selected: ''
    }
})

注意：在 select 元素内设置 multiple 属性可以多选，此时需要用数组接收被选元素的 value ！

动态渲染选项：

将选项存储在 data：

let vm = new Vue({
    el: "#app",
    data: {
        selected: [],
        options: [
            {text: "A", value: 'A'},
            {text: "B", value: 'B'},
            {text: "C", value: 'C'}
        ]
    }
})

使用 v-for 动态渲染 options：

<div id="app">
    <select v-model="selected" multiple
            style="width: 60px;">
        <option 
                v-for="(item, index) of options" 
                :key="index" 
                v-bind:value="item.value"
                >{{item.text}}</option>
    </select>
    <p>{{selected}}</p>
</div>

2. 修饰符

# .number

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

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

# .trim

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

<input v-model.trim="content" placeholder="edit me">

参考： Vue