学习笔记Vue（八）—— 计算属性(computed)和侦听器(watch)

最新推荐文章于 2019-07-14 18:43:51 发布

GRANDMA_Z

最新推荐文章于 2019-07-14 18:43:51 发布

阅读量157

点赞数

分类专栏： Vue学习文章标签： Vue JavaScript

本文链接：https://blog.csdn.net/qq_38932377/article/details/94898704

版权

Vue学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、计算属性：computed

搭配get，set使用，实现对属性数据的显示和监视，计算属性存在缓存，多次读取只执行一次getter计算。
举个例子：
实现一个计算器

<body>
    <div id="app">
        <input type="text" v-model.number="firstNum">+<input type="text" v-model.number="lastNum"><br>
        <input type="text" v-model="sum">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstNum: null,
                lastNum: null,
            },
            computed: {
                sum: {
                    get() { // get中涉及的值发生改变，则sum值就改变
                        return this.firstNum + this.lastNum;
                    },
                    set(val) { // set监听属性值的改变
                    	//如果sum值变了，firstNum和lastNum也改变成sum值的一半
                        var avg = val / 2;
                        this.firstNum = avg;
                        this.lastNum = avg;
                        console.log(val);
                    }
                }
            }
        });
    </script>
</body>

二、侦听器：watch

侦听器，观察data里的数据，数据一旦改变，执行对应的函数
查找过程 data > method > computed
两种书写方式

data里对应的值在侦听器里写成函数的形式：

var vm = new Vue({
            el: "#app",
            data: {
                name: 'zml',
                age: 18
            },
            watch: {  //侦听器，观察data里的数据，数据一旦改变，执行对应的函数
                 name (newVal) {
                     console.log('name');
                     this.person = `姓名：${this.name},年龄：${this.age}`;
                 },
                 age (newVal) {
                     console.log('age');
                     this.person = `姓名：${this.name},年龄：${this.age}`;
                 }
            }
        });

data里对应的值在侦听器里写成对象的形式：

var vm = new Vue({
            el: "#app",
            data: {
                name: 'zml',
                age: 18
            },
            watch: {  //侦听器，观察data里的数据，数据一旦改变，执行对应的函数
                 name: {
                    handler (newVal){
                        this.person = `姓名：${this.name},年龄：${this.age}`;
                    },
                    immediate: true   // 用对象的方式写侦听器，可以添加immediate属性，
                    //设置为true，则第一子加载页面的时候也触发该侦听器
                },
                age: {
                    handler (newVal){
                        this.person = `姓名：${this.name},年龄：${this.age}`;
                    }
                }
            }
        });

GRANDMA_Z

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习笔记Vue（八）—— 计算属性(computed)和侦听器(watch)

一、计算属性：computed搭配get，set使用，实现对属性数据的显示和监视，计算属性存在缓存，多次读取只执行一次getter计算。举个例子：实现一个计算器<body> <div id="app"> <input type="text" v-model.number="firstNum">+<input type="te...
复制链接

扫一扫