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">
            <img src="3.png" alt="主要内容图片">
            <p>标题3</p>
        </div>
        <div class="hide" v-show="activeIndex==index?true:false">
            <p>主要内容3</p>
        </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中定义样式，这种比较复杂
以上属个人经验及观点，若有不同请指教