vue中v-model 指令实现双向绑定原理

最新推荐文章于 2024-07-02 10:28:56 发布

zoepriselife316

最新推荐文章于 2024-07-02 10:28:56 发布

阅读量7.3k

点赞数 5

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/zoepriselife316/article/details/109735797

版权

vue 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

v-model 可以用在input中也可以用在textarea中。
包含两个指令：
一个v-bind,把message的值时时放到value中，
另一个v-on,给当前元素绑定input事件，将event.target.value赋值给message

<!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>

zoepriselife316

关注

5
点赞
踩
49

收藏

觉得还不错? 一键收藏
1
评论
vue中v-model 指令实现双向绑定原理

v-model 可以用在input中也可以用在textarea中。包含两个指令：一个v-bind,把message的值时时放到value中，另一个v-on,给当前元素绑定input事件，将event.target.value赋值给message<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=
复制链接

扫一扫