数码屋头条

Vue的基础知识（二）

2022-12-19 22:04 由 谢友海 发表于 #前端开发

本章将继续和大家分享Vue的一些基础知识。话不多说，下面我们直接上代码：

本文内容大部分摘自Vue的官网：https://v2.cn.vuejs.org/v2/guide/

一、计算属性

示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的计算属性</title>
    <script src="/lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <div desc="计算属性">
            <p>Original message: "{{ message }}"</p>
            <p>Computed reversed message: "{{ reversedMessage }}"</p>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app', //挂载点
            data: {
                message: 'Hello'
            },
            computed: {
                // 计算属性的 getter
                reversedMessage: function () {
                    // `this` 指向 vm 实例
                    return this.message.split('').reverse().join('');
                }
            },
            methods: {
                // 普通方法
                reversedMessageMethod: function () {
                    /* 
                        1、我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。
                        然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
                        这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
                        2、相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
                        3、我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。
                        然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
                    */
                    return this.message.split('').reverse().join('');
                }
            }
        });
    </script>
</body>

</html>

结果：

Original message: "Hello"

Computed reversed message: "olleH"

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

你可以像绑定普通 property 一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。

计算属性缓存 vs 方法：我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

二、侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的侦听器</title>
    <script src="/lib/vue.js"></script>
    <script src="/lib/axios.js"></script>
    <script src="/lib/lodash.js"></script>
</head>

<body>
    <div id="app">
        <div desc="侦听属性">
            <p>
                请输入您的问题:
                <input v-model="question">
            </p>
            <p>{{ answer }}</p>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app', //挂载点
            data: {
                question: '',
                answer: '在您提出问题之前，我不能给您答案!'
            },
            watch: {
                // 如果 `question` 发生改变，这个函数就会运行
                question: function (newQuestion, oldQuestion) {
                    var _this = this;
                    _this.answer = '正在等待您停止输入...'
                    _this.debouncedGetAnswer();
                }
            },
            created: function () {
                // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
                // 在这个例子中，我们希望限制访问 接口 的频率
                // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
                // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
                // 请参考：https://lodash.com/docs#debounce
                var _this = this;
                _this.debouncedGetAnswer = _.debounce(_this.getAnswer, 1500); //debouncedGetAnswer 方法名可自定义
            },
            methods: {
                getAnswer: function () {
                    var _this = this;
                    if (_this.question.indexOf('?') === -1) {
                        _this.answer = '问题通常包含问号!';
                        return;
                    }

                    _this.answer = '数据获取中...';
                    axios.get('https://autumnfish.cn/api/joke')
                        .then(function (response) {
                            _this.answer = response.data;
                        })
                        .catch(function (error) {
                            _this.answer = '请求接口异常：' + error;
                        });
                }
            }
        });
    </script>
</body>

</html>

在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

Lodash下载地址：https://github.com/lodash/lodash/tree/4.17.21

三、Class 与 Style 绑定

示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class与Style绑定</title>
    <script src="/lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <div desc="对象语法">
            <!-- active 这个 class 存在与否将取决于数据 property isActive 的 真值。 -->
            <!-- 你可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class attribute 共存。 -->
            <!-- 当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"。 -->
            <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
            <!-- 绑定的数据对象不必内联定义在模板里 -->
            <div v-bind:class="classObject"></div>
            <!-- 我们也可以在这里绑定一个返回对象的计算属性 -->
            <div v-bind:class="classObjectComputed"></div>
        </div>

        <div desc="数组语法">
            <!-- 我们可以把一个数组传给 v-bind:class，以应用一个 class 列表 -->
            <div v-bind:class="[activeClass, errorClass]"></div>
            <!-- 如果你也想根据条件切换列表中的 class，可以用三元表达式 -->
            <!-- 这样写将始终添加 errorClass，但是只有在 isActive 是 真 时才添加 activeClass。 -->
            <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
            <!-- 不过，当有多个条件 class 时这样写有些繁琐，所以在数组语法中也可以使用对象语法 -->
            <div v-bind:class="[{ active: isActive }, errorClass]"></div>
        </div>

        <div desc="绑定内联样式">
            <!-- v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。-->
            <!-- CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名  -->
            <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
            <!-- 直接绑定到一个样式对象通常更好，这会让模板更清晰 -->
            <!-- 同样的，对象语法常常结合返回对象的计算属性使用 -->
            <div v-bind:style="styleObject"></div>
            <!-- v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上： -->
            <div v-bind:style="[baseStyles, overridingStyles]"></div>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app', //挂载点
            data: {
                isActive: true,
                hasError: false,
                classObject: {
                    active: true,
                    'text-danger': false
                },
                activeClass: 'active',
                errorClass: 'text-danger',
                activeColor: 'red',
                fontSize: 30,
                styleObject: {
                    color: 'red',
                    fontSize: '13px'
                },
                baseStyles: {
                    color: 'black',
                    fontSize: '13px'
                },
                overridingStyles: {
                    'text-align': 'center'
                }
            },
            computed: {
                classObjectComputed: function () {
                    return {
                        active: this.isActive && !this.hasError,
                        'text-danger': this.hasError
                    }
                }
            }
        });
    </script>
</body>

</html>

渲染的结果如下：

<div id="app">
    <div desc="对象语法">
        <div class="static active"></div>
        <div class="active"></div>
        <div class="active"></div>
    </div>
    <div desc="数组语法">
        <div class="active text-danger"></div>
        <div class="active text-danger"></div>
        <div class="active text-danger"></div>
    </div>
    <div desc="绑定内联样式">
        <div style="color: red; font-size: 30px;"></div>
        <div style="color: red; font-size: 13px;"></div>
        <div style="color: black; font-size: 13px; text-align: center;"></div>
    </div>
</div>

四、条件渲染

示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的条件渲染</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <div desc="条件渲染">
            <!-- v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。 -->
            <!-- 可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。 -->
            <template v-if="loginType === 'username'">
                <label>Username</label>
                <input placeholder="Enter your username" key="username-input">
            </template>
            <template v-else-if="loginType === 'telephone'">
                <label>Telephone</label>
                <input placeholder="Enter your telephone" key="telephone-input">
            </template>
            <template v-else>
                <label>Email</label>
                <input placeholder="Enter your email address" key="email-input">
            </template>

            <!-- v-show 只是简单地切换元素的 CSS property display。 -->
            <h1 v-show="isShow">Hello!</h1>
        </div>
    </div>

    <script>
        //一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
        //因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
        var vm = new Vue({
            el: '#app', //挂载点
            data: {
                loginType: 'telephone',
                isShow: true
            }
        });
    </script>
</body>

</html>

渲染的结果如下：

<div id="app">
    <div desc="条件渲染">
        <label>Telephone</label>
        <input placeholder="Enter your telephone">
        <h1>Hello!</h1>
    </div>
</div>

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

五、列表渲染

示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的列表渲染</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <div desc="列表渲染">
            <ul id="example-1">
                <!-- 我们可以用 v-for 指令基于一个数组来渲染一个列表。 -->
                <!-- v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 -->
                <!-- 在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。 -->
                <li v-for="(item, index) in items">
                    {{ parentMessage }} - {{ index }} - {{ item.message }}
                </li>
            </ul>

            <ul id="example-2">
                <!-- 你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法 -->
                <li v-for="(item, index) of items">
                    {{ parentMessage }} - {{ index }} - {{ item.message }}
                </li>
            </ul>

            <!-- 你也可以用 v-for 来遍历一个对象的 property。 -->
            <div id="example-3">
                <div v-for="(value, name, index) in object">
                    {{ index }}. {{ name }}: {{ value }}
                </div>
            </div>

            <ul id="example-4">
                <!-- 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute -->
                <!-- 建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。 -->
                <li v-for="(item, index) in stus" :key="item.id">
                    {{ index }} - {{ item.name }}
                </li>
            </ul>

            <ul id="example-5">
                <!-- 有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。 -->
                <!-- 在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。 -->
                <li v-for="n in evenNumbers">{{ n }}</li>
            </ul>

            <div id="example-6">
                <ul v-for="set in sets">
                    <!-- 在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个方法 -->
                    <li v-for="n in even(set)">{{ n }}</li>
                </ul>
            </div>

            <div id="example-7">
                <!-- v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。 -->
                <span v-for="n in 10">{{ n }} </span>
            </div>

            <ul id="example-8">
                <!-- 类似于 v-if，你也可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容。 -->
                <template v-for="item in items">
                    <li>{{ item.message }}</li>
                    <li class="divider" role="presentation"></li>
                </template>
            </ul>

            <ul id="example-9">
                <!-- 当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。 -->
                <!-- 当你只想为部分项渲染节点时，这种优先级的机制会十分有用 -->
                <li v-for="stu in stus" v-if="stu.id==2" :key="stu.id">
                    {{ stu.name }}
                </li>
            </ul>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app', //挂载点
            data: {
                parentMessage: 'Parent',
                items: [
                    { message: 'Foo' },
                    { message: 'Bar' }
                ],
                object: {
                    title: 'How to do lists in Vue',
                    author: 'Jane Doe',
                    publishedAt: '2016-04-10'
                },
                stus: [
                    { id: 1, name: '张三' },
                    { id: 2, name: '李四' },
                    { id: 3, name: '王五' }
                ],
                numbers: [1, 2, 3, 4, 5],
                sets: [
                    [1, 2, 3, 4, 5],
                    [6, 7, 8, 9, 10]
                ]
            },
            computed: {
                evenNumbers: function () {
                    return this.numbers.filter(function (number) {
                        return number % 2 === 0
                    })
                }
            },
            methods: {
                even: function (numbers) {
                    return numbers.filter(function (number) {
                        return number % 2 === 0
                    })
                }
            }
        });
    </script>
</body>

</html>

渲染的结果如下：

<div id="app">
    <div desc="列表渲染">
        <ul id="example-1">
            <li> Parent - 0 - Foo </li>
            <li> Parent - 1 - Bar </li>
        </ul>
        <ul id="example-2">
            <li> Parent - 0 - Foo </li>
            <li> Parent - 1 - Bar </li>
        </ul>
        <div id="example-3">
            <div> 0. title: How to do lists in Vue </div>
            <div> 1. author: Jane Doe </div>
            <div> 2. publishedAt: 2016-04-10 </div>
        </div>
        <ul id="example-4">
            <li> 0 - 张三 </li>
            <li> 1 - 李四 </li>
            <li> 2 - 王五 </li>
        </ul>
        <ul id="example-5">
            <li>2</li>
            <li>4</li>
        </ul>
        <div id="example-6">
            <ul>
                <li>2</li>
                <li>4</li>
            </ul>
            <ul>
                <li>6</li>
                <li>8</li>
                <li>10</li>
            </ul>
        </div>
        <div id="example-7">
            <span>1 </span>
            <span>2 </span>
            <span>3 </span>
            <span>4 </span>
            <span>5 </span>
            <span>6 </span>
            <span>7 </span>
            <span>8 </span>
            <span>9 </span>
            <span>10 </span>
        </div>
        <ul id="example-8">
            <li>Foo</li>
            <li role="presentation" class="divider"></li>
            <li>Bar</li>
            <li role="presentation" class="divider"></li>
        </ul>
        <ul id="example-9">
            <li> 李四 </li>
        </ul>
    </div>
</div>

六、事件处理

示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的事件处理</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <div desc="事件处理">
            <!-- 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法。 -->
            <input type="button" value="提交" @click="warn('Form cannot be submitted yet.', $event)" />

            <!-- 事件修饰符是由点开头的指令后缀来表示的。 -->
            <div desc="事件修饰符">
                <!-- 点击事件将只会触发一次 -->
                <a @click.once="doThis">doThis</a>
                <!-- 阻止单击事件继续传播 -->
                <a @click.stop="doThis">doThis</a>
                <!-- 提交事件不再重载页面 -->
                <form @submit.prevent="doThis"></form>
                <!-- 修饰符可以串联 -->
                <a @click.stop.prevent="doThis">doThis</a>
            </div>

            <!-- 你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。 -->
            <div desc="按键修饰符">
                <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
                <input v-model="inputVal" @keyup.enter="submit">
                <!-- 处理函数只会在 $event.key 等于 PageDown 时被调用 -->
                <input v-model="inputVal" @keyup.page-down="submit">
                <!-- 
                    为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
                    .enter
                    .tab
                    .delete (捕获“删除”和“退格”键)
                    .esc
                    .space
                    .up
                    .down
                    .left
                    .right
                 -->
            </div>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app', //挂载点
            data: {
                inputVal: ''
            },
            methods: {
                warn: function (message, event) {
                    // 现在我们可以访问原生事件对象
                    if (event) {
                        event.preventDefault(); //阻止元素发生默认的行为
                    }

                    alert(message);
                },
                doThis: function () {
                    console.log('TODO');
                },
                submit: function () {
                    console.log(this.inputVal);
                }
            }
        });
    </script>
</body>

</html>

更多事件处理可参考Vue的官网。

七、表单输入绑定

示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的表单输入绑定</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。 -->
        <!-- 它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。 -->
        <div desc="表单输入绑定">
            <div desc="文本">
                <input v-model="message" placeholder="edit me">
                <p>Message is: {{ message }}</p>
            </div>

            <div desc="多行文本">
                <textarea v-model="message" placeholder="add multiple lines"></textarea>
                <p>Message is: {{ message }}</p>
            </div>

            <div desc="复选框">
                <!-- 单个复选框，绑定到布尔值 -->
                <div desc="单个复选框">
                    <input type="checkbox" id="checkbox" v-model="checked">
                    <label for="checkbox">{{ checked }}</label>
                </div>

                <!-- 单个复选框，绑定到自定义值 -->
                <div desc="单个复选框-写法2">
                    <input type="checkbox" id="toggle" v-model="toggle" true-value="yes" false-value="no">
                    <label for="toggle">{{ toggle }}</label>
                    <!-- 
                        // 当选中时
                        vm.toggle === 'yes'
                        // 当没有选中时
                        vm.toggle === 'no'
                     -->
                </div>

                <!-- 多个复选框，绑定到同一个数组 -->
                <div desc="多个复选框">
                    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
                    <label for="jack">Jack</label>
                    <input type="checkbox" id="john" value="John" v-model="checkedNames">
                    <label for="john">John</label>
                    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
                    <label for="mike">Mike</label>
                    <br>
                    <span>Checked names: {{ checkedNames }}</span>
                </div>
            </div>

            <div desc="单选按钮">
                <input type="radio" id="one" value="One" v-model="picked">
                <label for="one">One</label>
                <br>
                <input type="radio" id="two" value="Two" v-model="picked">
                <label for="two">Two</label>
                <br>
                <span>Picked: {{ picked }}</span>
            </div>

            <!-- 如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。 -->
            <!-- 在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。 -->
            <!-- 因此，更推荐像上面这样提供一个值为空的禁用选项。 -->
            <div desc="选择框">
                <div desc="单选时">
                    <select v-model="selected">
                        <option disabled value="">请选择</option>
                        <option v-for="option in options" v-bind:value="option.value">
                            {{ option.text }}
                        </option>
                    </select>
                    <span>Selected: {{ selected }}</span>
                </div>
                <!-- 多选时 (绑定到一个数组) -->
                <div desc="多选时">
                    <select v-model="selectedMultiple" multiple style="width: 50px;">
                        <option v-for="option in options" v-bind:value="option.value">
                            {{ option.text }}
                        </option>
                    </select>
                    <br>
                    <span>selectedMultiple: {{ selectedMultiple }}</span>
                </div>
            </div>

            <div desc="值绑定">
                <div desc="单选按钮">
                    <input type="radio" v-model="pickRadio" :value="radioVal">
                    <br>
                    <span>pickRadio: {{ pickRadio }}</span>
                    <!-- 
                        // 当选中时
                        vm.pickRadio === vm.radioVal
                     -->
                </div>

                <div desc="选择框的选项">
                    <select v-model="selectedObj">
                        <!-- 内联对象字面量 -->
                        <option :value="{ number: 123 }">123</option>
                    </select>
                    <br>
                    <span>selectedObj.number: {{ selectedObj.number }}</span>
                    <!-- 
                        // 当选中时
                        typeof vm.selectedObj // => 'object'
                        vm.selectedObj.number // => 123
                     -->
                </div>
            </div>

            <div desc="修饰符">
                <!-- 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符 -->
                <!-- 这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。 -->
                <!-- 如果这个值无法被 parseFloat() 解析，则会返回原始的值。 -->
                <input type="text" v-model.number="age">

                <!-- 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符 -->
                <input type="text" v-model.trim="message">

                <!-- 在“change”时而非“input”时更新 -->
                <!-- 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。 -->
                <!-- 你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步 -->
                <input type="text" v-model.lazy="message">
            </div>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app', //挂载点
            data: {
                message: '',
                checked: false,
                checkedNames: [],
                picked: '',
                selected: '',
                options: [
                    { text: 'One', value: 'A' },
                    { text: 'Two', value: 'B' },
                    { text: 'Three', value: 'C' }
                ],
                selectedMultiple: [],
                toggle: 'yes',
                pickRadio: '',
                radioVal: 'aaa',
                selectedObj: {},
                age: 18
            }
        });
    </script>
</body>

</html>

 

Demo源码：

链接：https://pan.baidu.com/s/15wMq3LOPz0f0IEnm-xC_tw 
提取码：uel4

此文由博主精心撰写转载请保留此原文链接：https://www.cnblogs.com/xyh9039/p/16989759.html

版权声明：如有雷同纯属巧合，如有侵权请及时联系本人修改，谢谢！！！

热门相关：超武穿梭   仗剑高歌   霸皇纪   仗剑高歌   豪门闪婚：帝少的神秘冷妻