- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <script src="vue.js"></script>
- <script src="MyJs.js"></script>
- <style>
- </style>
- </head>
- <body>
- <div id="Myapp">
- <ol>
- <game-item v-for="item in games" v-bind:game="item"></game-item>
- </ol>
- </div>
- <script>
- vue.component("game-item", {
- props:["game"], // 自定义属性
- template:"<li>{{game.title}}</li>",
- });
- var vm=new Vue({
- el:"#Myapp",
- data:{
- games:[
- {title:"勇者斗恶龙"},
- {title:"口袋妖怪"},
- {title:"守望先锋"},
- ]
- }
- })
- </script>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-2575721.html