vue中v-model的原理及应用讲解

晓明的日常操作

于 2020-09-29 11:47:35 发布

阅读量546

点赞数 1

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

本文链接：https://blog.csdn.net/wangming2531/article/details/108865594

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

v-model其实是一个语法糖
背后包含两个操作

v-bind动态绑定一个value属性
v-on给当前元素绑定input事件
也就是说以下两段代码等价

<input type="text" v-model="message">
<!--等同于下面-->
<input type="text"
	   v-bind:value="message"
	   v-on:input="message=$event.target.value">

具体·例子如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <!-- v-model="变量" 实现双向数据绑定
                给表单元素，增加v-model 表单的值变化，变量也会有变化 。变量有变化，表单的值也会有变化
            -->
            <input type="text" v-model="msg">
            {{msg}}
            <button v-on:click="change()">按钮</button>
        </div>

        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    msg:'hello'
                },
                methods:{
                    change(){
                        // 修改msg的值
                        this.msg=this.msg+'阿'
                    }
                }
		
            })
        </script>
    </body>
</html>

晓明的日常操作

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中v-model的原理及应用讲解

v-model其实是一个语法糖背后包含两个操作v-bind动态绑定一个value属性v-on给当前元素绑定input事件也就是说以下两段代码等价<input type="text" v-model="message"><input type="text" v-bind:value="message" v-on:input="message=$event.target.value">具体·例子如下:<!DO
复制链接

扫一扫