VUE双向绑定

双向绑定

v-model

使用v-model指令可以在表单input、textarea以及select元素上创建双向数据绑定，根据表单上的值，自动更新模板变量中的值

v-model会忽略表单的初始值，比如：checked、value、selected，如果需要的话，应该在javascript中首先声明初始值

text

获取到的为实际表单框中的字符串内容

<div id="container">
    <h3 v-html="message"></h3>
    <input type="text" v-model="message">
</div>

var vm = new Vue({
    el: "#container",
    data: {
        message: "这是个表单内容",
    },
})

textarea

<div id="container">
    <h3 v-html="message"></h3>
    <textarea v-model="message"></textarea>
</div>

// 同上

checkbox

单个复选框: 数据为绑定为true和false的布尔值

<div id="container">
    <h3 v-html="checked"></h3>
    <input type="checkbox" v-model="checked">
</div>

var vm = new Vue({
    el: "#container",
    data: {
        checked: true,
    },
})

多个复选框：选中的结果会绑定到同一个数组，将保存的v-model变量创建为数组

<div id="container">
    <h3 v-html="checked"></h3>
    <input name="fruit" type="checkbox" value="apple"  v-model="checked">苹果
    <input name="fruit" type="checkbox" value="banana" v-model="checked">香蕉
    <input name="fruit" type="checkbox" value="orange" v-model="checked">橘子
</div>

var vm = new Vue({
    el: "#container",
    data: {
        checked: new Array,
    },
})

radio

获取到的为对应选项的value值

<div id="container">
    <h3 v-html="picked"></h3>
    <input type="radio" name="gender" value="junior" v-model="picked">男
    <input type="radio" name="gender" value="girl" v-model="picked">女
</div>

var vm = new Vue({
    el: "#container",
    data: {
        picked: "哈哈哈哈",
    },
})

select

获取到的为对应选项的value值

<div id="container">
    <h3 v-html="selected"></h3>
    <select v-model="selected">
        <option disabled value="">你想去哪</option>
        <option value="山西">山西</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
    </select>
</div>

var vm = new Vue({
    el: "#container",
    data: {
        selected: "",
    },
})

selects

设置select标签的multiple属性即可设置为多选下拉菜单，按着ctrl键可以多选

<div id="container">
    <h3 v-html="selecteds"></h3>
    <select multiple v-model="selecteds">
        <option value="上衣">上衣</option>
        <option value="裤子">裤子</option>
        <option value="鞋">鞋</option>  
    </select>
</div>

var vm = new Vue({
    el: "#container",
    data: {
        selecteds: new Array, // 多重数据一般都要保存成数组
    },
})

双向绑定修饰符

.lazy

默认情况下，v-model在input和textarea表单中进行同步输入框的改动

添加了.lazy修饰符之后，对应的v-model绑定事件触发机制将变为change事件，只有在光标失去焦点时会触发

<div id="container">
    <h3 v-html="message"></h3>
    <input type="text" v-model.lazy="message">
</div>

var vm = new Vue({
    el: "#container",
    data: {
        message: "这是个表单内容",
    },
})

.number

如果用户希望将输入表单的内容处理为Number类型，可以使用.number给v-model进行修饰

如果表单字符串无法被处理为数字，则返回原始的值

<div id="container">
    <h3 v-html="typeof message"></h3>
    <input type="text" v-model.number="message">
</div>

.trim

使用.trim可以自动过滤输入框的首尾空格

<div id="container">
    <input type="text" v-model.trim="message">
    <br>
    <input type="text" v-model="message">
    <!-- 通过查看另一个表单中同步的缩进 -->
</div>        

动态绑定

当某些情况下，无法确定表单中所代表的属性值，可以使用v-bind进行动态绑定

v-model获取到的表单输入此时则是我们定义的v-bind属性值

<div id="container">
    <h3 v-html="message"></h3>
    <input type="radio" v-model="message" :value="choiceA"> A
    <input type="radio" v-model="message" :value="choiceB"> B
</div>

var vm = new Vue({
    el: "#container",
    data: {
        message: "", // 表单绑定变量
        choiceA: "Yes!", // 属性绑定变量，未来不需要修改标签中的value值即可动态修改
        choiceB: "No!",

    },
})