v-model实现双向数据绑定

最新推荐文章于 2025-10-20 18:16:11 发布

原创最新推荐文章于 2025-10-20 18:16:11 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #html5

本文探讨了Vue.js中的v-model指令如何实现双向数据绑定，它在表单元素如input及textarea上创建这一绑定，并根据元素类型自动同步数据。v-model并不会考虑元素的初始值，而是依赖于Vue实例的数据作为源。要在组件中设置初始值，应在组件的data选项中声明。

v-model

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        <!--
             v-model 可以用在input中也可以用在textarea中 。
        他包含两个指令：
            一个v-bind,把message的值时时放到value中，
            另一个v-on ,给当前元素绑定input事件
        -->
        <input type="text" v-model="message">
        <!--上面的代码等同于下方的 -->
        <input type="text" v-bind:value="message" @input="changeValue">
        <!-- 绑定事件中 -->
        <!-- <input type="text" v-bind:value="message" @input="changeValue"> -->
        <!-- 可以直接写在监听事件里 -->
        <!-- <input type="text" v-bind:value="message" @input="message = $event.target.value"> -->
        <h2> {{message}}</h2>
    </div>

    <script>
        // 方法调用多次时，会执行多次
        // 但计算属性有缓存，计算属性相关的值若不发生改变，计算属性只会执行一次，如果修改值的话，也是只执行一次。
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊，加油啊',
            },
            methods: {
                changeValue(event) {
                    //有事件时会产生event（里面包含想要的信息）
                    // 在上面的html中不需要加，在此传的event会自动传过去
                    //这个target.value是最新的value，复制给message即可
                    this.message = event.target.value
                }
            }
        })
    </script>
</body>

</html>