vue基础学习之componentWv-for2

最新推荐文章于 2024-09-14 18:11:30 发布

seven_begain

最新推荐文章于 2024-09-14 18:11:30 发布

阅读量217

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/seven_begain/article/details/79370538

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<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">
			<div>
				<h1>
				RemindTasks
				<span v-show="reminding">({{reminding}})</span> 
				</h1>
				<ul>
					<li @click="toopposite(task)" v-bind:class="{'completed':task.completed}" v-for="task in list">
						{{task.body}}<strong @click="deltask(task)">X</strong>
					</li>
					
				</ul>
			</div>
		</template>
		<script type="text/javascript">
			Vue.component('task-app',{
				template:"#task-template",
				props:['list'],
				methods:{
					toopposite:function(task){
						task.completed = !task.completed;
					},
					deltask:function(task){
						this.list.pop(task);
					}
				},
				computed:{
					reminding:function(){
						return this.list.filter(function(task){
							return !task.completed
						}).length;
					}
				}
			})
			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>