<todo-item v-for="item in groceryList" 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello_World.html</title>
        <script type="text/javascript" src="vue-dev/dist/vue.js"></script>
    </head>

    <body>

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，晚些时候我们会做个解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>


     <script>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其他什么人吃的东西' }
    ]
  }
})
    </script>

<hr>

 <div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>


     <script>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其他什么人吃的东西' }
    ]
  }
})
    </script>

    </body>
</html>

 

  1. 蔬菜
  2. 奶酪
  3. 随便其他什么人吃的东西
  1. 蔬菜
  2. 奶酪
  3. 随便其他什么人吃的东西
posted @ 2017-12-08 16:47  sky20080101  阅读(397)  评论(0)    收藏  举报