Vue中的计算属性与侦听器

xuxinwen32

于 2019-01-28 11:02:40 发布

阅读量159

点赞数

分类专栏：前端文章标签： Vue中的计算属性与侦听器

本文链接：https://blog.youkuaiyun.com/xuxinwen32/article/details/86673761

版权

前端专栏收录该内容

40 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性与侦听器</title>
    <script src="../2.5.20-vue.js"></script>   <!--//提前加载，避免出现抖屏-->
</head>
<body>
<div id="root">
    姓：<input v-model="firstName" />
    名：<input v-model="lastName" />
    名：<input v-model="aa" />
    <div>{{firstName}}{{lastName}}</div>
    <!--<div>{{fullName}}</div>-->
    <div>{{count}}</div>
    <div>{{aa}}</div>
</div>

<script>
    new Vue({
        el: '#root',  /**创建vue的实例，接管id等于root的内容*/
        data: {
            firstName: '',
            lastName: '',
            aa: '',
            count: 0,
        },
  /*      computed: {       //只有依赖的数据发生变化的时候才会重新计算,如果没有发生变化，那么会使用缓存
            fullName(){
                return this.firstName + ' '+ this.lastName
            }
        },*/
        watch: {           //监听器监听数据的变化，一旦发生变化我就可以在侦听器里面做我的业务逻辑
            firstName(){
                this.count++
            },
            lastName(){
                this.count++
            },
            aa(){
                this.count++
            }
        }
    })
</script>

</body>
</html>