<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>vue基础学习之componentWv-for.html
最新推荐文章于 2023-02-20 22:28:36 发布
7335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
