如何更改内部属性

Question

我想做一个 header 按钮类型，例如：

如果我调用“HeaderFunction”，那么所有选择都将为假，只有我点击的一个为真。并观察选定的属性 than=> 如果选定的属性为 true than :class 将被“选中”，所有其他选定的 false 属性将被“未选中”class...

我该如何处理？

<template>
    <button 
        type="button" 
        selected="true"  
        :class="selected" 
        @click='HeaderFunction'
    >
        first button
    </button>
    <button 
        type="button" 
        selected="false" 
        :class="nonselected" 
        @click='HeaderFunction'
    >
        second button
    </button>
</template>

    
<script>
export default {
   data(){
      return{
       selected:'btn btn-success btn-sm',
       nonselected:'btn btn-danger btn-sm',
     }
   },
    methods: {
    callFunction: function (event) {
        var selected = event.target.getAttribute('selected');
        return  alert (selected);
    }
  }
}
</script>

Answer 1

您需要一个数组和变量来保存当前活动的按钮：

<template>
  <button v-for="(item,index) in headerList" :key="index" :class="currentButtonIndex === index ? selected : unselected" @click="chooseHeader(index)">{{ item }}</button>
</template>

<script>
export default
{
  data()
  {
    return {
      currentButtonIndex: -1,
      selected: 'btn btn-success btn-sm',
      unselected: 'btn btn-danger btn-sm',
    }
  },
  computed:
  {
    headerList()
    {
      return [
        'First button',
        'Second button',
      ]
    }
  },
  methods:
  {
    chooseHeader(index)
    {
      this.currentButtonIndex = index;
    }
  }
}
</script>

如何更改内部属性

How to change an inside attributes

vuejs3