Vue js 基于状态的逻辑，用于多个 ul li 元素

Question

我有 ul 和静态的 li's(菜单元素(，呈现在服务器端。我需要在每个 li 上实现一些基于状态的逻辑(主动 li 重新着色，打开嵌套的子点(。我如何在 vue 上描述它，除了为每个 li 创建一个新的 vue 对象？多谢！附言sry，我是vue js的新手，需要抓住一个概念

Answer 1

new Vue({
  el: '#test',
  data: {
    array: ['a', 'b', 'c', 'd'],
    myObject: {
      A: 'a',
      B: 'b',
      C: 'c'
    }
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="test">
  <ul>
    <li v-for="(item, indice) in array">{{item}} - {{indice}}</li>
  </ul>
  <ul>
    <li v-for="(item, cle, indice) in myObject">{{cle}} : {{item}} - {{indice}}</li>
  </ul>
</div>