2-13 vue click事件里的&&

最新推荐文章于 2024-08-16 07:34:20 发布

原创最新推荐文章于 2024-08-16 07:34:20 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了Vue中@click事件结合逻辑运算符&&的使用技巧，通过 isChecked 函数控制 openSelectRadio 函数的执行条件，实现了点击事件的条件触发。此外，还介绍了子组件向上传递值的方法。

销户系统

1.vue click事件里的&&

 <div v-if="type === 'stock'&&!isIgnoreCsdc" class="selector" slot="content-1">
          <a
            v-if="!hasError(account)"
            href="javascript:;"
            @click="isChecked(i)&&openSelectRadio(i)"
          >{{cancelCsdc(account.csdcCancelFlag)}}</a>
        </div>

值得注意的是@click="isChecked(i)&&openSelectRadio(i)"的用法，会首先执行isChecked（）函数，若为true才会执行openSelectRadio(i)，所以经常被用来处理在某一条件下才能触发点击事件的问题

 //判断是否勾选了对应账户,勾选了才可以选择是否销中登账户
  isChecked(index){
    const indexNo = this.checkAccountIndexList.indexOf(index)
    if (~indexNo) {
      return true
    }
    return false
  }

而且isChecked（）函数会在每次点击时自动执行，不用进行监听处理。

2.子组件一层层向上传值一定要抓住$emit（），注意观察作用域和传递的值即可