vue使用数据驱动思想达成操作dom？

Question

html结构：

<ul>

    <li>

        <div class="show">

            <img src="1.png" alt="主要内容图片">

            <p>标题1</p>

        </div>

        <div class="hide">

            <p>主要内容1</p>

        </div>

    </li>

    <li>

        <div class="show">

            <img src="2.png" alt="主要内容图片">

            <p>标题2</p>

        </div>

        <div class="hide">

            <p>主要内容2</p>

        </div>

    </li>

    <li>

        <div class="show">

            <img src="3.png" alt="主要内容图片">

            <p>标题3</p>

        </div>

        <div class="hide">

            <p>主要内容3</p>

        </div>

    </li>

</ul>

因为结构内容大部分是不用变化的数据，所以采用直接写死的办法，并没有使用循环。页面结构是默认显示所有li标签下所有具有show样式的div，那么如何通过点击对应的li标签，将具有hide样式的div显示出来，同时其他hide样式的div隐藏呢？现在通过vue数据驱动思想如何实现呢？

Answer 1

立个flag，用v-show控制隐藏显示，或者根据flag选择class。这里的flag就是数据，这里不用循环写得会很麻烦。

Answer 2

增加一个activeIndex<li v-for="(item,index) in something" :key="index" @click="activeINdex=index"><div class="show" v-show="activeIndex!=index?true:false">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="3.png" alt="主要内容图片">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>标题3</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="hide" v-show="activeIndex==index?true:false">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>主要内容3</p>&nbsp; &nbsp; &nbsp; &nbsp; </div></li>

Answer 3

第一种方法：IsShow需要在data里定义；通过单击事件触发来改变IsShow值；hide隐藏属拼写不知道对不对，但是冒号一定不能丢，<div class="show" :hide='IsShow'><div class="hide" :hide='!IsShow'>第二种方法：标签上加上 v-if/v-show 然后通过单击事件触发都可以实现第三种方法：v-band:class绑定一个动态的class而不是一个写死的class，然后通过点击事件来触发，然后在css中定义样式，这种比较复杂以上属个人经验及观点，若有不同请指教