如何通过按下按钮（vue3）更改li背景颜色？答案

【问题标题】：How to change the li background color by pressing button (vue3)?如何通过按下按钮（vue3）更改li背景颜色？
【发布时间】：2021-09-15 19:31:02
【问题描述】：

我是一个全新的人，所以我非常感谢任何帮助。我需要通过按下按钮来更改 li 元素的颜色。但是当我按下它时，所有的li元素背景都在改变。

    <div class="app">
        <form class="joke-search">
            <input class="joke-search__field" type="text" placeholder="Lorem...">
        </form>
        <ul class="joke-list">
            <li class="joke-list__item" v-for="(joke, index) in jokes" :key="joke.id" v-bind:class="{ liked: isActive }">
                <div class="joke-list__title"> {{ joke.setup }} {{ joke.delivery }} </div>
                <img class="joke-list__btn" :src="src[currentSrc]" @click="changeImage()">
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
           jokes: [
               {id: 1, setup: 'Lorem', delivery: 'Lorem'},
               {id: 2, setup: 'Lorem', delivery: 'Lorem'},
               {id: 3, setup: 'Lorem', delivery: 'Lorem'},
               {id: 4, setup: 'Lorem', delivery: 'Lorem'}
           ],
           src: ['https://raw.githubusercontent.com/DimGA/assets/main/thumbs-up.svg', 'https://raw.githubusercontent.com/DimGA/assets/main/thumbs-up-active.svg'],
           currentSrc: 0,
           isActive: false
        }
        
    }, 
    methods: {
        changeImage(index) {
            this.currentSrc = (this.currentSrc == 0) ? 1 : 0;
            this.isActive = (this.isActive == true) ? false : true
        }
    }

}```


  [1]: https://i.stack.imgur.com/wXFGP.png

【问题讨论】：

标签： vue.js vuejs3 vue-cli

【解决方案1】：

定义另一个名为currentImgIndex 的属性，当您单击列表项时应设置该属性：

data() {
        return {
           jokes: [
               {id: 1, setup: 'Lorem', delivery: 'Lorem'},
               {id: 2, setup: 'Lorem', delivery: 'Lorem'},
               {id: 3, setup: 'Lorem', delivery: 'Lorem'},
               {id: 4, setup: 'Lorem', delivery: 'Lorem'}
           ],
           src: ['https://raw.githubusercontent.com/DimGA/assets/main/thumbs-up.svg', 'https://raw.githubusercontent.com/DimGA/assets/main/thumbs-up-active.svg'],
           currentSrc: 0,
           isActive: false,
           currentImgIndex:-1
        }
   },
  methods: {
        changeImage(index) {
           this.currentImgIndex=index
            this.currentSrc = (this.currentSrc == 0) ? 1 : 0;
            this.isActive = (this.isActive == true) ? false : true
        }
    }

在模板中将当前索引作为参数传递给changeImage方法并像v-bind:class="{ liked: index===currentImgIndex}"一样绑定类：

  <li class="joke-list__item" v-for="(joke, index) in jokes" :key="joke.id" v-bind:class="{ liked: index===currentImgIndex}">
                <div class="joke-list__title"> {{ joke.setup }} {{ joke.delivery }} </div>
                <img class="joke-list__btn" :src="src[currentSrc]" @click="changeImage(index)">
            </li>

【讨论】：