v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变

v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变;但是往往是我们往元素上添加样式导致所有v-for循环出的元素都会变化。
这里的话可以我们使用index索引,当点击一个元素时,将该元素的index索引赋给一个变量,如果该变量和当前元素绑定index相等时,则通过3目运算符来判断,如果相等就启用不相等就给空或者其他属性。

 <template #default>

        <div

          class="van-cell"

          v-for="(item, index) in datas.regions.slice(1)[mun].subFilters"

          :key="index >

          <div class="van-cell__title" @click="clc(index)">

            <span :style="isindex==index?{ color: 'red' } :'' ">{{ item.name }}</span>

            <i

    :style="isindex==index?{

                float: 'right',

                color: 'red',

                'font-style': 'normal',

                display: block 

                       }:style='display:none'>✔</i>

          </div>

        </div>

      </template>

<script>

data() {

    return {

      datas: {},

      mun: 0,

      isindex: '',

    }

  },

  methods: {

    clc(index) {

      this.isindex = index

    },

  },

</script>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值