| 123456789101112131415161718192021222324252627282930313233343536373839404142 |
- <html>
- <title>test1</title>
- <<head>
- <!-- 开发环境版本，包含了用帮助的命令行警告 -->
- <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
- <!-- 生产环境版本，优化了尺寸和速度 -->
- <script src="https://cdn.jsdelivr.net/npm/vue"></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>
- </body>
- <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>
- </html>
|
