vue.js计算属性(computed)

最新推荐文章于 2025-05-29 10:11:45 发布

Code Pupil

最新推荐文章于 2025-05-29 10:11:45 发布

阅读量359

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js

本文链接：https://blog.youkuaiyun.com/Code_Pupil/article/details/79678451

vue.js 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个Vue.js的应用案例，展示了如何使用计算属性来处理数据的复杂逻辑，以实现字符串反转的功能。通过简单的示例代码，解释了计算属性相较于模板表达式的优点。

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- Vue.js -->
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div>
    <!--# 如表达式如果过长，或逻辑更为复杂时，就会变得臃肿甚至难以阅读和维护 #-->
    {{ text.split(',').reverse().join(',') }}
    <!--# 所以在遇到复杂的逻辑时应该使用计算机属性 #-->
</div>

<div id="app">
    {{ reversedText }}
</div>
</body>
</html>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            text:'123,456'
        },
        //所有的计算属性都以函数的形式写在vue实例内的computed选项内，最终返回计算的结果
        computed:{
            reversedText:function () {
                //这里的this指向的是当前的vue实例
                return this.text.split(',').reverse().join(',');
            }
        }
    })
</script>