vue 计算属性传参数

最新推荐文章于 2024-07-24 22:25:19 发布

笑望灬星辰

最新推荐文章于 2024-07-24 22:25:19 发布

阅读量5k

点赞数

分类专栏： vue2 文章标签： vue js html 前端 html5

本文链接：https://blog.csdn.net/hu1628299958/article/details/106700006

版权

vue2 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

vue 计算属性传参数

在这里插入图片描述
由vue官网文档的介绍可知，computed 计算属性是会被缓存的除非依赖的值改变了才会重新计算，而在methods中定义的方法每次不管依赖值改不改变都会重新计算，所以computed的性能开销比methods的要低

<template>
    <div class="box">
        <div>{{test}}</div>
        <!-- 报错 -->
        <!-- <div :class="test1(1)">{{test}}</div> -->
        <!-- 
            那么计算属性 computed怎么传参数呢？
         -->
         <!--  -->
        <div :class="test1(1)">computed怎么传参数</div>
        <div :class="test1(0)">computed怎么传参数</div>
    </div>
</template>

<script>
export default {
  components: {

  },
  data () {
    return {
      num: 100
    }
  },
  methods: {

  },
  computed:{
    test(){
        return  this.num*2
    },
    
    // 计算属性传参数  写成闭包的形式
    test1(a=0) {
        return (a=0)=>{
            if(a==1){
                return 'a1'
            } else {
                return 'a2'
            }
        }
    }
  }
}
</script>

<style scoped>
.a1{
    color:red
}
.a2{
    color:blue
}
</style>

效果
在这里插入图片描述

传递参数时这种写法会报错必须要写成闭包的形式

    // 报错
    // test1(a=0) {
    //         if(a==1){
    //             return 'a1'
    //         } else {
    //             return 'a2'
    //         }
    // },

在这里插入图片描述