gridcontrol选中多行数据进行复制_复习之v-model指令（双向数据绑定指令）

本质上v-model为语法糖。

你可以用v-model指令在表单input、textarea及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。即数据更新-元素更新、元素更新-数据也会更新。

input元素

1）type=text 文本框类型：

如：

    <div id="app">
        <input v-model="message">
        <p>{{ message }}</p>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: 'hello wrold!'
            },
        })
    </script>

2）type=checkbox 复选框：

• 单个复选框

绑定到布尔值，v-model="Boolean"。

    <div id="app">
        <input type="checkbox" id="checkbox" v-model="checked" />
        <label for="checkbox">{{ checked }}</label> {{ checked }}
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                checked: true
            },
        })
    </script>

• 多个复选框

绑定到同一个数组，v-model="Array"。数组中的值为被选中的input框value值。

    <div id="app">
        <input type="checkbox" value="A" v-model="checkedNames">
        <label for="cheng">A</label>

        <input type="checkbox" value="B" v-model="checkedNames">
        <label for="deng">B</label>

        <input type="checkbox" value="C" v-model="checkedNames">
        <label for="tong">C</label>
        <br>
        <span>被选中的有: {{ checkedNames }}</span>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                checkedNames: []
            },
        })
    </script>

• type=radio 单选框

被绑定的数据和value同步。

    <div id="app">
        <input type="radio" value="A" v-model="picked">
        <label for="cheng">A</label>

        <input type="radio" value="B" v-model="picked">
        <label for="deng">B</label>

        <input type="radio" value="C" v-model="picked">
        <label for="tong">C</label>
        <br>
        <span>被选中的有: {{ picked }}</span>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                picked: ''
            },
        })
    </script>

textarea元素 (多行文本)

    <div id="app">
        <p>多行文本为：{{ message }}</p>
        <textarea v-model="message" placeholder="添加文本"></textarea>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: ''
            },
        })
    </script>

select元素

1）单选：

    <div id="app">
        <select v-model="selected">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>选择: {{ selected === '请选择' ? '' : selected }}</span>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                selected: '请选择'
            },
        })
    </script>

注意：如果 v-model 表达式的初始值未能匹配任何选项，``<select>`` 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，可以提供一个值为空的禁用选项，如：

    <div id="app">
        <select v-model="selected">
            <option :disabled="selected">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>选择: {{ selected === '请选择' ? '' : selected }}</span>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                selected: '请选择'
            },
        })
    </script>

2）多选：

绑定到一个数组。

    <div id="app">
        <select v-model="selected" multiple>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
        <span>选择: {{ selected }}</span>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                selected: []
            },
        })
    </script>

v-model的修饰符

• .lazy

在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。如果要变为使用change事件同步可以添加lazy修饰符，如：

    <div id="app">
        <!-- 在“change”时才同步更新数据，而非“input”时更新 -->
        <input v-model.lazy="msg"> {{msg}}
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data : {
                msg: "hello world!"
            }
        })

        setTimeout(() => {
            console.log(vm.msg);
        },(3000))
    </script>

• .number

自动将用户的输入值转为数值类型。

    <div id="app">
        <input v-model.number="msg" type="number"> {{msg}}
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data : {
                msg: "hello world!"
            }
        })

        setTimeout(() => {
            console.log(vm.msg);
        },(3000))
    </script>

• .trim

自动过滤用户输入的 首尾 空白字符。

    <div id="app">
        <input v-model.trim="msg"> {{msg}}
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data : {
                msg: "    hello world!"
            }
        })
    </script>