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

问题描述

问 题

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

解决方案

<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>

数据变化驱动视图变化。

这篇关于javascript - vue 更改文本内容的一个疑问，多个div当前文本改变，其他文本恢复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！