vue实现任务列表

最新推荐文章于 2023-07-24 22:15:01 发布

方寸而已

最新推荐文章于 2023-07-24 22:15:01 发布

阅读量486

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/lch01122/article/details/127248074

版权

本文介绍如何利用Vue.js框架来创建一个功能完备的任务列表应用。内容涵盖Vue实例的创建、数据绑定、指令使用、组件化以及事件处理等核心概念，帮助开发者快速掌握Vue进行前端开发的基本技巧。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 创建容器 -->
		<div id="app">
			<!-- <p>{
  {obj.title}}</p> -->
			<input type="text" v-model='obj.title' @keyup.enter='addTask'>
			<h3>未完成{
  {unList.length}}</h3>
			<ul>
				<li v-for="(item,index) in unList" :key='item.title'>
					<input type="checkbox" v-model='item.done'>
					{
  {item.title}}
					<button @click='delTask(item)'>X</button>
				</li>
			</ul>
			<h3>已完成{
  {doList.length}}</h3>
			<ul>
				<li v-for=