鍍金池/ 問答/HTML/ vue使用數(shù)據(jù)驅(qū)動(dòng)思想達(dá)成操作dom？

vue使用數(shù)據(jù)驅(qū)動(dòng)思想達(dá)成操作dom？

html結(jié)構(gòu)：

<ul>
    <li>
        <div class="show">
            <img src="1.png" alt="主要內(nèi)容圖片">
            <p>標(biāo)題1</p>
        </div>
        <div class="hide">
            <p>主要內(nèi)容1</p>
        </div>
    </li>
    <li>
        <div class="show">
            <img src="2.png" alt="主要內(nèi)容圖片">
            <p>標(biāo)題2</p>
        </div>
        <div class="hide">
            <p>主要內(nèi)容2</p>
        </div>
    </li>
    <li>
        <div class="show">
            <img src="3.png" alt="主要內(nèi)容圖片">
            <p>標(biāo)題3</p>
        </div>
        <div class="hide">
            <p>主要內(nèi)容3</p>
        </div>
    </li>
</ul>

因?yàn)榻Y(jié)構(gòu)內(nèi)容大部分是不用變化的數(shù)據(jù)，所以采用直接寫死的辦法，并沒有使用循環(huán)。頁面結(jié)構(gòu)是默認(rèn)顯示所有l(wèi)i標(biāo)簽下所有具有show樣式的div，那么如何通過點(diǎn)擊對(duì)應(yīng)的li標(biāo)簽，將具有hide樣式的div顯示出來，同時(shí)其他hide樣式的div隱藏呢？現(xiàn)在通過vue數(shù)據(jù)驅(qū)動(dòng)思想如何實(shí)現(xiàn)呢？

回答
編輯回答
孤巷

增加一個(gè)activeIndex

<li v-for="(item,index) in something" :key="index" @click="activeINdex=index">
<div class="show" v-show="activeIndex!=index?true:false">
            <img src="3.png" alt="主要內(nèi)容圖片">
            <p>標(biāo)題3</p>
        </div>
        <div class="hide" v-show="activeIndex==index?true:false">
            <p>主要內(nèi)容3</p>
        </div>

</li>
2017年9月9日 01:20
編輯回答
冷眸

立個(gè)flag，用v-show控制隱藏顯示，或者根據(jù)flag選擇class。
這里的flag就是數(shù)據(jù)，這里不用循環(huán)寫得會(huì)很麻煩。

2017年1月17日 03:51
編輯回答
大濕胸

第一種方法：IsShow需要在data里定義；通過單擊事件觸發(fā)來改變IsShow值；hide隱藏屬拼寫不知道對(duì)不對(duì)，但是冒號(hào)一定不能丟，
<div class="show" :hide='IsShow'>
<div class="hide" :hide='!IsShow'>
第二種方法：
標(biāo)簽上加上 v-if/v-show 然后通過單擊事件觸發(fā)都可以實(shí)現(xiàn)

第三種方法：
v-band:class綁定一個(gè)動(dòng)態(tài)的class而不是一個(gè)寫死的class，然后通過點(diǎn)擊事件來觸發(fā)，然后在css中定義樣式，這種比較復(fù)雜
以上屬個(gè)人經(jīng)驗(yàn)及觀點(diǎn)，若有不同請(qǐng)指教

2017年1月15日 16:12