vue 更改文本内容的一个疑问，多个div当前文本改变，其他文本恢复

Question

具体问题是如下图，我点击任意一个div，文本内容换成正在播放，其他不变，点击另外的当前换成正在播放，其他恢复成点击试听，如果再次点击正在播放的，自身恢复成点击试听，没有引用JQ之类的，用vue的思想应该如何制作啊，求思路

Answer 1

<template>
    <div v-for="item in list" @click="onPlay(item)">
        <div v-if="item.id === activeId">正在播放</div>
        <div v-else>点击试听</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [],
            activeId: -1
        }
    },
    methods: {
        onPlay(item) {
            // 与当前播放 id 一致，说明点击的是正在播放的项，变为 -1，否则当前播放 id 改为点击的项
            this.activeId = item.id === this.activeId ? -1 : item.id
        }
    }
}
</script>

数据变化驱动视图变化。