Vue 计算属性 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model.number="a">
        <input type="text" v-model.number="b">
        <button @click="handleCount()">点击</button>
        <button @click="handle()">对比</button>
        <h4>methods:-----{{c}}</h4>
        <h4>computed:-----{{count}}</h4>
    </div>
</body>
</html>
<script src="./vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            a:"",
            b:"",
            c:""
        },
        methods:{
            handleCount(){
                console.log("点击事件执行了")
                this.c = this.a + this.b;
            },
            handle(){
                this.handleCount();
               console.log( this.count)
            }
        },
        computed:{
            count(){
                console.log("computed执行了");
                return this.a + this.b
            }
        }
    })



    /*
        计算属性:computed

            通过属性计算而得来的属性


            1、computed对象里面都是函数，函数的名称随便定义
            2、函数的执行是依赖data中的属性，当属性发生变化的时候当前函数就会执行
            3、尽量不要在computed中操作修改data中的属性
            4、computed里面的函数必须要返回一个值
            5、computed里面的函数调用是不需要加()的
            6、当data中的属性没有发生改变的时候，如果调用computed里面的函数的话，是不会执行的，而是会从缓存中读取最后的一次结果



            computed与watch的区别，以及使用的场景？

                1、场景：
                    什么时候会使用computed？当一个属性受多个属性影响的时候用computed   购物车的总结结算
            

    
    */
</script>

 

posted @ 2019-07-22 10:00  前端小菜鸟吖  阅读(2241)  评论(0)    收藏  举报