关于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控制元素可视