vue动态点击添加样式

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的样式