vue基础学习之componentWv-for.html

seven_begain

于 2018-02-25 17:53:38 发布

阅读量266

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/seven_begain/article/details/79370378

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何利用Vue.js框架创建一个简单的任务列表应用。该应用包含任务项，并通过点击任务来标记其完成状态。文章展示了完整的HTML、CSS及JavaScript代码，包括Vue组件定义和数据绑定方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>