VUE循环动态添加ref属性,及动态判断获取哪个

上代码:HTML

<div

        v-for="Item in optimizeList"   //这里举个例子,想循环什么,自己去赋值就行

        :key="Item.appId"

        class="classify_item"

        >                                              //↓↓↓这个是按钮绑定的事件(传进来的是循环生成的 Item 对象)

<svg-icon class-name="search-icon" icon-class="展开2" @click="OpenClick(Item)" />

        <div class="com" :ref="Item.pym">

                <p>这里是每次都会动态生成的带不同  ref 的div (注意 ref 前边的冒号别丢了)</p>

                <p>控制显示/隐藏,也是用上边的按钮控制这个div显示/隐藏</p>

        </div>

 </div>

 js代码:

OpenClick(e) {

this.$refs[e.pym][0].classList.toggle('dis')

},

---

特别注意:  this.$refs[e.pym][0] 这个双方括号取值语法  很关键,我就在这浪费2小时

特别注意:  classList.toggle('dis')   class的特别方法,也特别好用(没有就添加这个属性,   有就  删除) 可以很好的利用这一特性控制同一按钮 点击添加属性 再点击删除属性

---

css代码:

.dis{

display: none;

}