Vue学习(计算属性computed)

Vue.js 计算属性

关键词:computed。

我们可以使用 computed 来替代 methods,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。
computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter。

实例(购物车):

<!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>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
    <div id="app">
        <div class="container">
            <table class="table table-hover">
                <tr>
                    <th>
                        全选
                        <input type="checkbox" v-model="isAll">
                    </th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in cartsList">
                    <td>
                        <input type="checkbox" v-model="item.isSelected">
                    </td>
                    <td>
                        <img :src="item.productCover" alt="">
                        <span>{{item.productName}}</span>
                    </td>
                    <td>
                        {{item.productPrice}}
                    </td>
                    <td>
                        <input type="number" v-model.number="item.productCount">
                    </td>
                    <td>{{(item.productPrice * item.productCount).toFixed(2)}}
                    </td>
                    <td>
                        <button class="btn btn-danger" @click="deleteItem(index)">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        总价:{{total}}
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script src="node_modules/axios/dist/axios.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data:{
                cartsList: [],
                // isAll: false
            },
            // computed: 自动计算属性
            // computed中的属性也是 数据模型
            computed: {
                isAll: {
                    get() {
                        return this.cartsList.every((item)=> {
                            return item.isSelected == true;
                        })
                    },
                    set(val) {
                        // console.log(val)
                        this.cartsList.forEach(item => {
                            item.isSelected = val
                        });
                    }
                    
                },
                total() {
                    // computed中自动计算属性,是不能使用异步代码!!!
                    var mytotal = this.cartsList.reduce((total, item)=> {
                        if(item.isSelected) {
                            total += item.productPrice * item.productCount;
                            return total;
                        }else {
                            return total;
                        }
                    }, 0)
                    return mytotal.toFixed(2)
                }
            },
            // 被创建成功,vm被创建,默认执行这个函数
            created() {
                axios.get("./carts.json").then((data)=> {
                    console.log(data.data)
                    this.cartsList = data.data
                })
            },
            methods: {
                selectAll() {
                    // 1.先拿到全选的值,到底是true还是false
                    console.log(this.isAll)
                    this.cartsList.forEach(item => {
                        item.isSelected = this.isAll
                    });
                },
                selectOne() {
                    //1.检测cartsList中所有元素的isSelected,如果有一个为false则全选为false,如果全部为tru则全选为true
                    this.isAll = this.cartsList.every((item)=> {
                        return item.isSelected == true;
                    })
                },
                deleteItem(index) {
                    this.cartsList.splice(index, 1)
                },
                calcTotal() {
                    // 函数表达式在dom写入时。当页面一旦渲染,不管渲染什么数据,就会重新执行
                    console.log("111")
                    var total = this.cartsList.reduce((total, item)=> {
                        if(item.isSelected) {
                            total += item.productPrice * item.productCount;
                            return total;
                        }else {
                            return total;
                        }
                    }, 0)
                    return total.toFixed(2)
                }
            }        
        })
    </script>
</body>
</html>

注意:computed中自动计算属性,是不能使用异步代码的!!!

你可能感兴趣的:(Vue.js)