vue框架-----点击按钮变色、选中按钮后字体变色

按钮变色

html

<div class="ibox-content1">
	 <button type="button" class="btn btn-w-m1 btn-default margin10 "
	         v-for="(item,index) in button_data" :key="index" 
	         :class="current === index ? 'active1' : ''"   
	         @click="switchTag(index)">
	     {{item.name}}
	 </button>
 </div>

循环下面的数组，获取数据

 :class="current === index ? 'active1' : ''"   

这个意思就是当 当前的标签所以和数组循环的索引一样的时候，就添加active1的样式，否则不添加
再设置一个点击事件 当点击的时候 获取点击按钮的索引 ，下面的方法里面定义好了。

初始化数据

<script>
    export default {
        data() {
            return {
                current:0,
                button_data: [
                    {
                        name: ''
                    },
                    {
                        name: ''
                    },
                    {
                        name: ''
                    },
                    {
                        name: ''
                    },
                    {
                        name: ''
                    },
                    {
                        name: ''
                    },
                    {
                        name: ''
                    }

                ]
            }
        },

这么写数组的原因：这样，从后端获取数据的时候，有想再添加的数据，可以随意添加，前面html的动态获取数据也不用动

方法

       switchTag(index){
           this.current = index;

       }

选中按钮后字体变色

代码

<tr v-for="(item,index) in equipList" :key="index" :class="current === index ? 'active1' : ''"   @click="switchTag(index)">
    <td>
        <div class="p-xxs b-r-sm ibox-width text-center"> {{item.name}}</div>
    </td>
    <td><code style="font-size: 16px;">{{item.number}}</code></td>
    <td :style="{'color':current === index ? '#fff':'' }" @click="switchTag(index)">{{item.unit}}</td>
</tr>

<td :style="{'color':current === index ? '#fff':'' }" @click="switchTag(index)">{{item.unit}}</td>

注意，这个写法和按钮不同
要写大括号 注意格式！！！