vue js基于状态的多个ul li元素的逻辑

时间:2018-03-05 07:36:37

标签: javascript html vue.js html-lists

我在服务器端呈现了具有静态安装的li(菜单元素)的ul。我需要在每个li上实现一些基于状态的逻辑(主动li重新着色,打开嵌套的子点)。我如何在vue上描述它,除了为每个li创建一个新的vue对象?非常感谢! 附: sry,我是vue js的新人,需要抓住一般的概念

1 个答案:

答案 0 :(得分:0)

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>