Vue.Js：列表渲染

Question

我正在做这个小代码挑战：

我们提供了一些简单的Vue.js 模板代码。您的目标是首先将项设置为具有以下属性的三个对象的数组：

姓名 = Daniel，年龄 = 25 - 姓名 = 约翰，年龄 = 24 - 姓名 = Jen，年龄 = 31。

然后在 template 中，您应该显示一个无序列表 (UL)，其中包含列表项 (LI)。每个列表项的内容应包含两个跨度 (SPAN)，一个带有 name，另一个带有 age。 span 元素应该用一个空格分隔。

下面的代码在我尝试运行程序时没有任何反应。 （不确定是不是因为它在浏览器中）。

这是我的代码：

<template>
  <div id="app">
    <ul>
      <li v-for="item in items">
        {{name}} {{age}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        items: 
        [
          { name: 'Daniel' },
          { age: '25' },
          { name: 'John' },
          { age: '25' },
          { name: 'Jen' },
          { age: '31' }
        ]
      };
    }
  };
</script>

编辑评论部分

<template>
  <div id="app">
    <ul>
      <li v-for="({name,age}) in items">
        <span>{{name}}</span> <span>{{age}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        items: 
        [
          {name: 'Daniel', age: '25'},
          {name: 'John', age: '25'},
          {name: 'Jen', age: '31'}

        ]
      };
    }
  };
</script>

Answer 1

您只需要在items 中创建三个对象，每个对象都有name 和age。然后，在v-for 中，您可以解构数组中的每个项目并打印两个空格分隔的span 元素中的属性：

new Vue({
  el: "#app",
  data() {
    return {
      items:  [
        { name: 'Daniel', age: '25' },
        { name: 'John', age: '25' },
        { name: 'Jen', age: '31' }
      ]
    };
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  
<div id="app">
  <ul>
    <li v-for="({name,age}, index) in items" :key="index">
      <span>{{ name }}</span>{{ ' ' }}<span>{{ age }}</span>
    </li>
  </ul>
</div>