首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue学习(三)属性绑定和双向数据绑定

使用实例中的data可进行数据绑定

使用v-model:进行双向数据绑定

监听事件:watch

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue学习</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            姓:<input v-model="firstName" />
            名:<input v-model="lastName" />
            <div>{{fullName}}</div>
            <div>{{count}}</div>
        </div>
    </body>
    <script>
        new Vue({
            el:"#root",
            data:{
                firstName:'',
                lastName:'',
                count:0
            },
            computed:{
                fullName:function(){
                    return this.firstName + ' '+ this.lastName
                }
            },
            watch:{
                fullName:function(){
                    this.count++
                }
            }
        })
    </script>
</html>

当full Name改变时,watch会监听,使count的数值+1

count的初始值为0

当改变firstName时,count+1

改变lastName时count+1

同时也会看到fullName会跟随输入内容的变化而变化,这就实现了双向数据绑定。

下一篇
举报
领券