02-v-model的原理

最新推荐文章于 2024-07-22 10:55:51 发布

林笙10

最新推荐文章于 2024-07-22 10:55:51 发布

阅读量113

点赞数

分类专栏： # 09-v-model的使用文章标签： vue js

本文链接：https://blog.csdn.net/weixin_46498227/article/details/116562418

版权

09-v-model的使用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

02-v-model的原理

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>02-v-model的原理</title>
    <!-- v-model其实是一个语法糖，它的背后本质上是包含两个操作：
    1，v-bind绑定一个value属性
    2，v-on指令给当前元素绑定input事件
    也就是说
    <input type="text" v-model="messeg">
    等同于
    <input type="text" v-bind:value="message" v-on:input="message=$event.target.value"> -->
</head>

<body>
    <div id="app">
        <!-- <input type="text" v-model="message"> -->
        <!-- <input type="text" v-bind:value="message" v-on:input="getValues"> -->
        <input type="text" v-bind:value="message" v-on:input="message=$event.target.value">
        {{message}}
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊'
            },
            methods:{
                getValues(event){
                  this.message = event.target.value;
                }
            }
        })
    </script>
</body>

</html>

林笙10

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
02-v-model的原理

02-v-model的原理<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>02-v-model的原理</title> <!-- v-model其实是一个语法糖，它的背后本质上是包含两个操作： 1，v-bind绑定一个value属性 2，v-on指令给当前元素绑定input事件也就是说 <inp
复制链接

扫一扫