Vue之计算属性

Volcano_WQL

于 2020-03-31 14:59:49 发布

阅读量142

点赞数

分类专栏： Vue.js自学笔记文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_45614713/article/details/105222954

版权

Vue.js自学笔记专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨Vue中的计算属性，展示了如何使用computed属性提高代码效率，通过缓存计算结果避免重复计算，同时提供实例代码，包括字符串拼接和逆序显示单词的计算属性应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

computed:{}将计算结果缓存，若不改变内容，计算结果保持相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
<!--    一般写法 -->
    <h1>{{firstName+lastName}}</h1>
<!--    计算属性-->
    <h1>{{fullName}}</h1>
<!--    逆序显示单词 -->
    <div>{{word.split('').reverse().join("")}}</div>
    <div>{{reverseWord}}</div>
</div>

<script>
    var app=new Vue({
        el:"#app",
        data:{
            firstName: '王',
            lastName: '子',
            word:"volcano"
        },
        computed:{//将计算结果进行缓存
            fullName:function () {
                //只要this.firstName/this,lastName变量不改变，就不会重新计算
                return this.firstName+this.lastName
            },
            reverseWord:function () {
                return this.word.split('').reverse().join("")
            }
        },
        methods:{

        },
    })
</script>
</body>
</html>