如何在点击时获取类名 - Vue Event答案

【问题标题】：How to get class name on click - Vue Event如何在点击时获取类名 - Vue Event
【发布时间】：2022-09-30 21:09:50
【问题描述】：

我是 vue 新手：有没有更好的方法和短鳕鱼来解决这个烂摊子：

 <div  class=\"opencart\"  :class=\"{activex : isOc }\"  @click=\"chk1()\" >
 Opencart <small>(soon)</small>
</div>
<div class=\"woox\" :class=\"{activex : isWo }\" @click=\"chk2()\" >
<img src=\"../../assets/images/wooLogo.png\" >
 Woocommerce
</div>
<div class=\"shopify\" :class=\"{activex : isSo }\" @click=\"chk3()\" >
<img src=\"../../assets/images/shopify.png\" width=\"80\"> 
Shopify
</div>

  data(){
    return{
      isOc: false,
      isWo: false,
      isSo: false,
      platforms:{ selected: null} 
    }
  },
  methods:{
    
    chk1(){
      this.isOc = true
      this.isWo = false
      this.isSo = false
      this.platforms.selected = \'oc\';
      console.log(this.platforms.selected);
    },
    chk2(){
     
      this.isOc = false
      this.isWo = true
      this.isSo = false
      this.platforms.selected = \'woo\';
      console.log(this.platforms.selected);

    },
    chk3(){
      this.isOc = false
      this.isWo = false
      this.isSo = true
      this.platforms.selected = \'shopify\';
      console.log(this.platforms.selected);

    }

我想知道，有没有最好的方法在 vue 中以更好的方式编写上面的代码.. 不使用 vue3 组合 API

标签： vue.js vuejs3

【解决方案1】：

你真的需要一个平台变量吗？为什么不只使用""（未选择平台）、"oc"、"woo" 或"shopify" 之一。此外，我会使用一种方法并为其提供如下参数：

<div class="opencart" :class="{activex : selectedPlatform === 'oc'}" @click="handleClick('oc')" >
    Opencart <small>(soon)</small>
</div>
<div class="woox" :class="{activex : selectedPlatform === 'woo'}" @click="handleClick('woo')" >
    <img src="../../assets/images/wooLogo.png" >
    Woocommerce
</div>
<div class="shopify" :class="{activex : selectedPlatform === 'shopify'}" @click="handleClick('shopify')" >
    <img src="../../assets/images/shopify.png" width="80"> 
    Shopify
</div>

  data() {
    return {
      selectedPlatform: ""
    }
  },
  methods: {
    handleClick(selectedPlatform) {
      this.selectedPlatform = selectedPlatform;
    }
  }

【讨论】：