資料裡寫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;
        },
複製程式碼