demo(vue)----用computed计算属性对3本书价格进行统计

最新推荐文章于 2022-12-01 19:34:31 发布

Awui

最新推荐文章于 2022-12-01 19:34:31 发布

阅读量574

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_46290225/article/details/106236785

版权

vue 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1.第一种直接方式，但是不美观。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h3>总价格：{{books[0].price+books[1].price+books[2].price}}</h3>
    </div>
    <script src="../vuejs/vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                books: [{
                    name: '语文',
                    price: 77,
                    id: 1
                }, {
                    name: '数学',
                    price: 88,
                    id: 2
                }, {
                    name: '英语',
                    price: 99,
                    id: 3
                }]
            }
        })
    </script>
</body>

</html>

2.第二种用computed，里面用到for循环。（computed包含get和set两个属性，这里也可以使用methods实现，但是computed相比methods性能好，computed只调用一次,methods调用多次）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h3>总价格：{{total}}</h3>
    </div>
    <script src="../vuejs/vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                books: [{
                    name: '语文',
                    price: 77,
                    id: 1
                }, {
                    name: '数学',
                    price: 88,
                    id: 2
                }, {
                    name: '英语',
                    price: 99,
                    id: 3
                }]
            },
            computed: {
                total: function() {
                    let rs = 0
                    for (let i = 0; i < this.books.length; i++) {
                        rs += this.books[i].price
                    }
                    return rs
                }
            }
        })
    </script>
</body>

</html>