计算属性computed、过滤器定义Vue.filter()

原创

已于 2022-12-04 15:48:33 修改 · 923 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #前端框架 #vue.js

于 2022-11-22 21:43:38 首次发布

本文介绍了Vue.js中的计算属性和过滤器。计算属性用于处理复杂的逻辑，提供缓存机制，避免模板过于臃肿。过滤器则用于数据加工，通过管道符将数据传递给过滤器进行处理。计算属性不能传参，而过滤器可以，但在Vue 3中已被废弃。

计算属性是为了计算得到一个结果而设计的；
放在Vue中computed里面定义：
如果我们想在页面上打印一个变量，那就直接“{ {变量}}”放在大括号里面，然后变量在data里面定义好初始值，就可以在页面上输出了，比如：

<body>
    <div id="box">
        {
  
  {mytext}}
    </div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                mytext:"啦啦啦"
            }
        })
    </script>
</body>

结果：

但是如果我们想打印一个值，但是这个值是需要通过逻辑计算的值，虽然“{ {}}”大括号里面也能放表达式，但是如果这个表达式很复杂，我们放在里面，就会显得dom部分很复杂，复杂代码应该是放在Vue中的，这样就会显得头重脚轻，所以我们引入了一个“计算属性”的概念；

还是把简单的变量名称放在“{ {}}”里，把逻辑代码放在Vue的computed里，computed里面放的就是计算属性；
在computed里面定义的时候，定义成函数，而且一定要有返回值；
这就体现了计算属性的作用是为了计算得到一个结果而设计的，我们只要定义一个想要存储结果的变量放在{

最低0.47元/天解锁文章