前端 Vue框架学习实例（五）

最新推荐文章于 2024-08-19 15:50:15 发布

自足的猿

最新推荐文章于 2024-08-19 15:50:15 发布

阅读量97

点赞数

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

本文链接：https://blog.csdn.net/zhshuzi/article/details/118530664

版权

Vue学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.计算属性的基本运用

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

例子：使用计算属性计算出商品的总价格

<body>
    <div id="app">
        <h2>总价格：{{totalPrice}}</h2>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                books: [{
                    id: 110,
                    name: '代码大全',
                    prics: 120
                }, {
                    id: 111,
                    name: 'Linux大全',
                    prics: 120
                }, {
                    id: 112,
                    name: '现代操作系统',
                    prics: 120
                }, {
                    id: 113,
                    name: '深入理解计算机原理',
                    prics: 120
                }, {
                    id: 114,
                    name: 'JavaScript编程艺术',
                    prics: 120
                }]
            },
            computed: {
                totalPrice: function() {
                    let result = 0
                    for (let i = 0; i < this.books.length; i++) {
                        result += this.books[i].prics
                    }
                    return result
                }
            }
        })
    </script>
</body>

2.计算属性computed和methods的对比

两者的效果是一样的。
computed是基于它的依赖缓存，只有相关依赖发生改变是才会重新取值。
methods在重新渲染时，函数总会重新调用执行。

下方代码有函数getfullName（）和计算属性fullName，他们运行的结果是一样的。

<body>
    <div id="app">
        <h2>{{firstname}} {{lastname}}</h2>
        <h2>{{getfullName()}}</h2>
        <h2>{{fullName}}</h2>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                firstname: 'akOBE',
                lastname: 'Bryant'
            },
            methods: {
                getfullName: function() {
                    return this.firstname + ' ' + this.lastname

                }
            },
            computed: {
                fullName: function() {
                    return this.firstname + ' ' + this.lastname

                }
            }
        })
    </script>
</body>

3.计算属性computed的getter和setter

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter 。

<body>
    <div id="app">
        {{fullName}}
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                firstname: 'akOBE',
                lastname: 'Bryant'
            },
            computed: {
                fullName: {
                    set: function() {
                        // 计算属性一般没有set方法，只读属性
                    },
                    get: function() {
                        return this.firstname + ' ' + this.lastname
                    }
                }
            }
        })
    </script>
</body>

自足的猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端 Vue框架学习实例（五）

1.计算属性的基本运用计算属性关键词:computed。计算属性在处理一些复杂逻辑时是很有用的。例子：使用计算属性计算出商品的总价格<body> <div id="app"> <h2>总价格：{{totalPrice}}</h2> </div> <script> const app = new Vue({ el: "#app", .
复制链接

扫一扫