数据里写true,false字段

可以设置默认显示第几个显示，并且item之间互不影响

data

            biaoData: [
                { title: "title1", show: false },
                { title: "title2", show: true },
                { title: "title3", show: true },
                { title: "title4", show: true }
            ]

html

        <ul>
            <li v-for="item in biaoData" :key="item.id">
                <button @click="biaoBtn(item)">on</button>
                <span v-show="item.show">{{item.title}}</span>
            </li>
        </ul>

method

        biaoBtn(item) {
            item.show = !item.show;
        },

根据index来判断

默认全部隐藏，item之间会影响

data

            cIndex : -1,
            nineData: [
                { title: "title1" },
                { title: "title2" },
                { title: "title3" }
            ]

html

        <ul>
            <li v-for="(item,index) in nineData" :key="item.id">
                <button @click="nineBtn(index)">on</button>
                <span v-show="nineBoolean && (cIndex == index)">{{item.title}}</span>
            </li>
        </ul>

method

        nineBtn(index) {
            this.nineBoolean = !this.nineBoolean;
            this.cIndex = index;
        },

tab栏

data

            cIndex: 0,
            nineData: [
                { title: "title1" },
                { title: "title2" },
                { title: "title3" }
            ]

html

        <ul>
            <li v-for="(item,index) in nineData" :key="item.id">
                <button @click="nineBtn(index)">on</button>
                <span v-show="cIndex == index">{{item.title}}</span>
            </li>
        </ul>

method

        nineBtn(index) {
            this.nineBoolean = !this.nineBoolean;
            this.cIndex = index;
        },