Vue中怎么实现属性绑定和双向数据绑定

发布时间：2021-07-09 15:57:07 阅读：331 作者：Leah 栏目：大数据

Vue开发者专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

这篇文章给大家介绍Vue中怎么实现属性绑定和双向数据绑定，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

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

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

监听事件：watch

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