vue基礎學習之componentWv-for.html
阿新 • • 發佈：2018-12-30
<style> .completed{ text-decoration: line-through; } </style> <body> <script type="text/javascript" src="js/vue.js" ></script> <div id="app"> <task-app :list="tasks"></task-app> </div> <template id="task-template"> <ul> <li @click="toopposite(task)" v-bind:class="{'completed':task.completed}" v-for="task in list"> {{task.body}} </li> </ul> </template> <script type="text/javascript"> Vue.component('task-app',{ template:"#task-template", props:['list'], methods:{ toopposite:function(task){ task.completed = !task.completed; } } }) var app =new Vue({ el:'#app', data:{ tasks:[ {body:'this is first',completed:false}, {body:'this is second',completed:true}, {body:'this is lase',completed:false} ] } }) </script> </body>