Vue中点击div元素时如何修改其边框颜色？

下面提供几种Vue中实现点击div切换边框颜色的方案，适配单选、多选等不同场景：

方案一：动态绑定CSS类（推荐，样式与逻辑分离） #

这种方式通过响应式数据控制类名的添加/移除，便于统一管理样式。

修改后的代码： #

HTML

<div 
  class="t1" 
  v-for="text in myArray" 
  :key="text" 
  :class="{ 'active-border': activeItem === text }"
  @click="Clicktochgcolor(text)"
>
  {{text}}
</div>

Script

export default {
  data(){
    return{
      myArray: ['Test','Test2','Test3'],
      activeItem: '' // 记录当前选中的项
    }
  },
  methods:{
    Clicktochgcolor(text){
      this.activeItem = text; // 点击时更新选中项
      // 如果需要切换（点击取消选中），可以改成：
      // this.activeItem = this.activeItem === text ? '' : text;
    }
  }
}

CSS

.t1{
  border: 2px solid black;
  padding:6px;
  margin:6px;
  border-radius:8px;
  cursor: pointer; /* 加上鼠标指针提示，提升交互体验 */
}
.active-border{
  border-color: red; /* 选中时的边框颜色 */
}

方案二：直接绑定内联样式 #

如果样式逻辑简单，也可以直接通过响应式数据绑定内联样式：

修改后的代码： #

HTML

<div 
  class="t1" 
  v-for="text in myArray" 
  :key="text" 
  :style="{ borderColor: activeItem === text ? 'red' : 'black' }"
  @click="Clicktochgcolor(text)"
>
  {{text}}
</div>

Script

export default {
  data(){
    return{
      myArray: ['Test','Test2','Test3'],
      activeItem: ''
    }
  },
  methods:{
    Clicktochgcolor(text){
      this.activeItem = text;
    }
  }
}

CSS（无需额外类，保留原样式即可）

.t1{
  border: 2px solid black;
  padding:6px;
  margin:6px;
  border-radius:8px;
  cursor: pointer;
}

方案三：支持多选场景 #

如果需要同时选中多个div并修改其边框颜色，可以用数组记录选中项：

修改后的代码： #

HTML

<div 
  class="t1" 
  v-for="text in myArray" 
  :key="text" 
  :class="{ 'active-border': selectedItems.includes(text) }"
  @click="Clicktochgcolor(text)"
>
  {{text}}
</div>

Script

export default {
  data(){
    return{
      myArray: ['Test','Test2','Test3'],
      selectedItems: [] // 记录所有选中的项
    }
  },
  methods:{
    Clicktochgcolor(text){
      if(this.selectedItems.includes(text)){
        // 已选中，移除该项
        this.selectedItems = this.selectedItems.filter(item => item !== text);
      } else {
        // 未选中，添加该项
        this.selectedItems.push(text);
      }
    }
  }
}

CSS

.t1{
  border: 2px solid black;
  padding:6px;
  margin:6px;
  border-radius:8px;
  cursor: pointer;
}
.active-border{
  border-color: red;
}

内容的提问来源于stack exchange，提问作者Meow