1 <!DOCTYPE html>
2 <html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <!--
9 因为组件和vm对象处于同级，无法直接得到items数据
10 v-for从vm对象中得到items遍历出的每一个item赋值给res,组件用props接收res，模板再接收res-->
11 <div id="app">
12 <wty v-for="item in items" v-bind:res="item"></wty>
13 </div>
14 <!--1.导入Vue.js-->
15 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
16 <script>
17 //定义一个Vue组件component
18 Vue.component("wty",{
19 props: ['res'],
20 template: '<li>{{res}}</li>'
21
22 });
23 var vm = new Vue({
24 el:"#app",
25 data:{
26 items: ["Java","Linux","Python"]
27 }
28 })
29 </script>
30 </body>
31 </html>
