什么是计算属性？

最新推荐文章于 2024-05-17 14:32:46 发布

YD_family

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量2.7k

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/yd_family/article/details/121946252

版权

首先它是一种属性，其次他有计算这个特殊的性质，每次取得他的值的时候，它不像普通属性那样直接返回结果，而是经过计算后再返回结果，同时只要在它的当中引用data中的某个属性，当这个属性发送改变时，计算属性会自动计算重新执行

如果我们在视图层中写了太多了逻辑 导致代码的可维护性降低

计算属性的语法

计算（数据处理）属性（vue实例中的一个属性）就是可以对data中的数据进行一些数据处理一条数据在不同位置展示出不同形态的时候

语法：

写在与el data methods watch等同级的位置

computed:{

        处理完的数据变量(){

                return 你的操纵数据的逻辑

        }

}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demodiv">
        <!-- 你在{{}}中写数据的逻辑处理是没问题的  但是  视图层是展示数据的地方   
        如果我们在视图层中写了太多了逻辑   导致代码的可维护性降低 -->
        <h1>{{text}}</h1>
        <h1>{{text.toUpperCase()}}</h1>
        <h1>{{text.toUpperCase().substr(1,5)}}</h1>

        <h1>计算属性的方式对text进行处理</h1>
        <h1>{{uppertext}}</h1>
        <h1>{{subtext}}</h1>

    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:"abcdefgijk"
            },
            methods:{

            },
            watch:{
              
            },
            computed:{
                uppertext(){
                    // 必须
                    return this.text.toUpperCase()
                },
                subtext(){
                    return this.text.toUpperCase().substr(1,6)
                }
            }
        })
    </script>
</body>
</html>

YD_family

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
什么是计算属性？

首先它是一种属性，其次他有计算这个特殊的性质，每次取得他的值的时候，它不像普通属性那样直接返回结果，而是经过计算后再返回结果，同时只要在它的当中引用data中的某个属性，当这个属性发送改变时，计算属性会自动计算重新执行如果我们在视图层中写了太多了逻辑导致代码的可维护性降低计算属性的语法计算（数据处理）属性（vue实例中的一个属性）就是可以对data中的数据进行一些数据处理一条数据在不同位置展示出不同形态的时候语法：写在与el data methods wat...
复制链接

扫一扫