computed传参

一、问题

二、解决方法

三、总结

tiips:如嫌繁琐，直接移步总结即可！

一、问题

computed可以依据其他变量动态计算出值，但是v-for渲染html时，需要根据html中传入的不同变量，来分别做处理或者利用 html中的值该怎么办呢？

二、解决方法

template中使用 computed计算属性时，添加传参

computed函数中返回一个函数，函数的参数就是使用计算属性时添加的参数

1.template中传参：getPieceStyle 计算属性(params1,params2)

      <template>
          <ul class="over-turn">
                 <li class="bg-color sp-piece"
                      :style="getPieceStyle(index,item)"
                      v-for="(item, index) in [8,9,10]"
                      :key="index"
                  >{{item}}</li>
           </ul>
       </template>


      const getPieceStyle = computed(() => {
        return function (index,item) {
          console.log('computed function',index,item)
          //拿到html中传入的 参数 index和item了
          //逻辑处理
           
          return  return {background:item*10 >=curSpo2Beat.value?'#777':'red'};
        };

        // return (index,item)=>{
        //   console.log("computed function",index,item)
        // }
      });

2. setup中传参: compute属性.value(params1,params2) （不建议)

setup(props){
      const getPieceStyle = computed(() => {
        return (index,item)=>{
          console.log("computed function",index,item)
          return {background:index>3?'red':'green'}
        }
      });
      console.log("computed function result",getPieceStyle.value(5,'test'))
}