关于vue数据驱动的问题？

Question

问题与需求：都说vue是数据驱动，那么对于类似于手风琴的需求（通过点击某个li，展示对应li里面的内容，在不操作dom的情况下如何通过数据驱动达成呢？）

比如以下结构，点击对应的li元素其里面的文本显示，同时其他兄弟li里的文本隐藏。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

Answer 1

<ul>
   <li v-for="(el, idx) in list"
       @click="() => triggerIdx = idx"
   >{{idx === triggerIdx? el : '' }}</li>
</ul>

data () {
    return {
        list: [0,1,2,3],
        triggerIdx: 0
    }
}

Answer 2

数据驱动，说白了，就是利用ViewModel里面的数据，来控制DOM的样式，间接的操作DOM，楼上代码示例很清晰明了

Answer 3

可以通过更改data
使用v-if 或者动态:class控制元素可视