首页 > 其他 > 详细

vue学习笔记4 v-mode

时间:2020-05-14 21:04:00      阅读:46      评论:0      收藏:0      [点我收藏+]

v-model的本质

v-model 其实就是一个语法糖,它的背后本质上是包含两个操作

1 v-bind绑定一个value属性

2 v-on指令给当前元素绑定input事件

技术分享图片
    <body>
        <div id="app">
            1 v-model双向绑定
            <br/>
            <input type=‘text‘ v-model = ‘message‘ >
            <hr />
            2 v-bind 实现双向绑定
            <br/>
            <input type=‘text‘ v-bind:value = ‘message‘ v-on:input=‘valChange‘ >
            <hr />
            2 v-bind 第二种写法
            <br/>
            <input type=‘text‘ v-bind:value = ‘message‘ @input="message =$event.target.value" >
             <br/>
            结果:{{message}}
        </div>
        
    </body>
    <script>
        const app = new Vue({
            el:‘#app‘,
            data:{
                message:‘你好‘
            },
            methods:{
                valChange(event){
                    this.message = event.target.value
                }
            }
        })
    </script>
View Code

技术分享图片

1

<input type=‘text‘ v-model = ‘message‘ >

2

<input type=‘text‘ v-bind:value = ‘message‘ v-on:input=‘valChange‘ >
methods:{
                valChange(event){
                    this.message = event.target.value
                }
            }

3

<input type=‘text‘ v-bind:value = ‘message‘ @input="message =$event.target.value" >

三种写法效果相同

vue学习笔记4 v-mode

原文:https://www.cnblogs.com/polax/p/12891233.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!