zoukankan      html  css  js  c++  java
  • Vue 任务清单

    <style>
    li{ list-style: none; }
    #root{
    	 400px;
    	min-height: 400px;
    	box-shadow: 0 0 10px #666;
    	margin: 20px auto;
    	padding: 20px;
    }
    .task-input{
    	 100%;
    	height: 30px;
    	padding-left: 10px;
    	font-size: 13px;
    	border: 1px solid #ccc;
    }
    .task-count{ 
    	padding: 0;
    	height: 30px;
    	clear: both;
    }
    .task-count li:first-of-type{
    	float: left;
    	font-size: 14px;
    	color: red;
    }
    .task-count .action{
    	float: right;
    	padding: 0;
    }
    .task-count .action a{
    	font-size: 14px;
    	text-decoration: none;
    	color: #888;
    	display: inline-block;
    	padding: 2px 8px;
    	border: 1px solid #fff;
    }	
    .task-count .action .active{
    	border-color: #888;
    }
    .tasks{
    	box-shadow: 0 0 2px #ccc;
    	padding: 10px;
    }
    .tasks .todo-list{
    	padding: 0;
    	margin: 0;
    }
    .tasks .todo-list .todo{
    	height: 40px;
    	line-height: 40px;
    }
    .tasks .todo-list .active{
    	color: #999;
    	text-decoration: line-through;
    }
    .tasks .todo-list .destroy{
    	color: red;
    	background: #fff;
    	border: none;
    	float: right;
    	margin-top: 12px;
    	cursor: pointer;
    }
    .tasks .todo-list .editing .view{
    	display: none;
    }
    .tasks .todo-list .editing .edit{
    	display: block;
    }
    .tasks .todo-list .edit{
    	display: none;
    	 80%;
    	padding: 4px 10px;
    }
    </style>
    <div id="root">
    	<p>添加任务:</p>
    	<input 
    		class="task-input"
    		placeholder="输入任务 回车即可添加任务"
    		type="text"
    		v-on:keyup.enter="addTodo"
    		v-model="todo"
    	>
    	<ul class="task-count" v-show="list.length">
    		<li>{{noCheckedLength}} 个任务未完成 </li>
    		<li class="action">
    			<a class="active" href="javascript:;">所有任务</a>
    			<a href="javascript:;">未完成的任务</a>
    			<a href="javascript:;">完成的任务</a>
    		</li>
    	</ul>
    	<p>任务列表:</p>
    	<div class="tasks">
    		<span v-show="!list.length">还没有添加任何任务</span>
    		<ul class="todo-list">
    			<todo-item
    				class="todo"
    				:class="{active: item.isChecked, editing: item === edtorTodos}"
    				v-for="(item, index) in list"
    				:content="item"
    				:index="index"
    			></todo-item> 
    		</ul>
    	</div>
    </div>
    <script>
    Vue.component('todo-item', {
    	props: ['content', 'index'],
    	template: `
    		<li>
    			<div class="view">
    				<input class="toggle" type="checkbox" v-model="content.isChecked">
    				<label @dblclick="edtorTodo(content)">{{content.title}}</label>
    				<button class="destroy" @click="deleteTodo(index)">x</button>
    			</div>
    			<input 
    			
    				type="text" 
    				class="edit" 
    				v-model="content.title"
    				@blur="edtorTodoed(content, index)"
    				@keyup.13="edtorTodoed(content, index)"
    				@keyup.esc="cancelTodo(content)"
    			/>
    		</li>
    	`,
    	data () {
    		return {
    
    		}
    	}
    })
    new Vue({
    	el: '#root',
    	data: {
    		list: [
    			{
    				title: 'xiaobai'
    			}
    		],
    		todo: '',
    		edtorTodos: '',  // 记录编辑的数据
    		beforeTitle: ''
    	},
    	methods: {
    		// addTodo () {
    		// 	if(!this.todo) return;
    		// 	this.list.push({
    		// 		title: this.todo,
    		// 		isChecked: false
    		// 	})
    		// 	this.todo = '';
    		// },
    		// watch: {
    		// 	list: {
    				
    		// 	}
    		// },
    		// deleteTodo (index) { // 删除
    		// 	this.list.splice(index, 1)
    		// },
    		// edtorTodo (todo) { // 编辑
    		// 	this.beforeTitle = todo.title;
    		// 	this.edtorTodos = todo;
    		// },
    		// edtorTodoed (todo, index) { // 编辑成功
    		// 	// 如果输入框为空 则删除列表
    		// 	if(!todo.title) this.list.splice(index, 1);
    		// 	this.edtorTodos = ''
    		// },
    		// cancelTodo (todo) { // 取消编辑
    		// 	todo.title = this.beforeTitle;
    		// 	this.edtorTodos = ''
    		// }
    	},
    	// directives: { // 自定义组件
    	// 	'focus': {
    	// 		update (el, binding){
    	// 			if(binding.value){
    	// 				el.focus();
    	// 			}
    	// 		}
    	// 	}
    	// },
    	computed: {
    		noCheckedLength () { // 计算未完成任务的数量
    			return this.list.filter(function(item){
    				return !item.isChecked
    			}).length
    		}
    	}
    })
    </script>
    
  • 相关阅读:
    Windows Store App 主题动画
    Windows Store App 过渡动画
    Windows Store App 控件动画
    Windows Store App 近期访问列表
    Windows Store App 文件选取器
    Windows Store App 访问应用内部文件
    Windows Store App 用户库文件分组
    Windows Store App 获取文件及文件夹列表
    Windows Store App 用户库文件夹操作
    Windows Store App 用户库文件操作
  • 原文地址:https://www.cnblogs.com/xiaobaiv/p/9292004.html
Copyright © 2011-2022 走看看