Vue组件

 

 

 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>

 

posted @ 2022-08-04 19:38  doremi429  阅读(15)  评论(0)    收藏  举报