computed计算属性

最新推荐文章于 2025-03-08 11:50:40 发布

liantaiyou

最新推荐文章于 2025-03-08 11:50:40 发布

阅读量258

点赞数 1

本文链接：https://blog.youkuaiyun.com/liantaiyou/article/details/104972673

版权

本文深入探讨Vue.js框架中的computed计算属性，讲解其工作原理、使用场景及最佳实践，帮助开发者理解如何利用computed属性实现数据的动态计算和响应式更新。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <input type="text" v-model="str">
<!--    <p>{{fn(str)}}</p>-->
<!--    <p>{{fn(str)}}</p>-->
<!--    <p>{{fn(str)}}</p>-->
<!--    <p>{{fn(str)}}</p>-->
<!--    <p>{{str.split("").reverse().join("")}}</p>-->
<!--    <p>{{str | reverStr}}</p>-->
<!--    <p>{{str | reverStr}}</p>-->
<!--    <p>{{str | reverStr}}</p>-->
<!--    <p>{{str | reverStr}}</p>-->
<!-- 以上方法每次都会执行 -->
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <!-- 当成属性去使用，如果数据重复使用的话，computed只执行一次，只有当数据
    发生改变的时候。computed才会再次执行 -->
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            // 指定你的数据属性
            str:"这里有一盘西瓜"
        },
        // 计算属性
        computed:{
            // 定义了一个名字为comReverse的计算属性
            comReverse(){
                // 结果
                console.log(3333333);
                return this.str.split("").reverse().join("");
                //将字符串分割变成数组之后进行反转，在转为字符串
            }
        },
        filters:{
            reverStr(v){
                console.log(2222222)
                return v.split("").reverse().join("");
            }
        },
        methods:{
            // 指定方法
            fn(v){
                console.log(111111111)
                return v.split("").reverse().join("");
            }
        },
        mounted(){
            // 当你的实例在页面当中挂载完毕之后会执行。
        }
    })
</script>
</html>