v-for循环的多个input框点击添加样式
1,先有input
我的是点击下面的input给上面的input添加样式,定位到一起了
<input type="text" v-model="item.value" style="padding: 1vh 0; height: 3vh; margin: 1vh 0" :class = "isclass == index ? 'addclass' : '' " /> <input type="password" v-model="item.value" style=" padding: 1vh 0; height: 3vh; margin: 1vh 0; position: absolute; right: 0; color: black; opacity: 0; border: none; " @focus="inpFocus(index)" />
给下面的input绑定一个focus焦点事件并且传一个下面
在上面的input v-bind一个class
2,焦点事件
因为点击的时候要把下标赋值过去
所以让这个isClass默认为-1,不等于任何一个input框
const isclass = ref(-1); const inpFocus = (index)=>{ isclass.value = index; }
3,样式
通过刚才的绑定::class = "isclass == index ? 'addclass' : '' "
在style里给这个addclass写一个样式
.addclass{ border: 1px solid red; }
最后的效果就是点击哪个input框,哪个input框就被添加了这个addclass的样式