vue.js - vue中具有特定样式的对象数组

Question

new Vue({
  el: '#app1',
  data: {
  objects:[
  {
    object: {
      title: 'C',
      author: 'Denis',
      publishedAt: '1960'
    }
  },
  {
    object: {
      title: 'Vue',
      author: 'Yet To Find',
      publishedAt: '2010'
    }
  }]}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<div id="app1">
  <ol>
    <div v-for="object in objects">
      {{index}} 
      <li v-for="value in object">
         {{value}}
      </li>
    </div>
  </ol>
</div>

new Vue({
  el: '#app1',
  data: {
  objects:[
  {
     
      title: 'C',
      author: 'Denis',
      publishedAt: '1960'
    
  },
  {
     
      title: 'Vue',
      author: 'Yet To Find',
      publishedAt: '2010'
    
  }]}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<div id="app1">
  <ol>
    <div v-for="object in objects">
      {{index}} 
      <li v-for="value in object">
         {{value}}
      </li>
    </div>
  </ol>
</div>

我能够实现这两种变化。但我正在努力实现以下目标

1.
  .C
  .Denis
  .1960
2.
  . 
  .
  .

我怎样才能从我所拥有的东西中做到这一点？我试图用点（。）来表达项目符号/数字。

标签： vue.js

Answer 1

new Vue({
  el: '#app',
  data: {
    objects: [{
        title: 'C',
        author: 'Denis',
        publishedAt: '1960'
      },
      {
        title: 'Vue',
        author: 'Yet To Find',
        publishedAt: '2010'

      }
    ]
  }
})

/*ignore - hide snippets console */

.as-console-wrapper {
  max-height: 0px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>

<div id="app">
  <ul>
    <div v-for="(object, index) in objects">
      {{ index + 1 }}
      <li v-for="(value, key, index) in object" style="list-style-type:none">
        {{ index + 1 }}. {{ key }} = {{ value }}
      </li>
    </div>
  </ul>
</div>