效果图

 

代码及其注释：

​
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <title>todolist</title>
</head>

<body>
  
	<div id="app">
		<el-container>
			<!-- 标题 -->
			<el-header height="20">
				<h1>TodoList</h1>
			</el-header>

			<el-main>
				<!-- @keyup.enter.native:input回车触发add函数，添加.native是因为element-ui对input有封装，不添加无法触发 -->
				<el-input placeholder="回车添加待办事项" class="totoinput" @keyup.enter.native="add" 
						v-model="newtodo.content">
				</el-input>

				<p>进行中：{{ todolist.length -  donenum}}  已完成：{{ donenum }}</p>
				<!--循环-->
				<el-row v-for="(item,index) in todolist" class="list-row">
					<!--状态改变的样式变化-->
					<el-col :xs="2" :sm="1" :md="1" :lg="1" :xl="1" class="check" :class="{ 'red': !todolist[index].done ,
							'green' : todolist[index].done }">
						<!-- 复选框 -->
						<el-checkbox size="mini" v-model="item.done"></el-checkbox>
					</el-col>

					<!--显示的内容样式-->
					<el-col :xs="20" :sm="22" :md="22" :lg="22" :xl="22">
						<input type="text" v-model="item.content" class="ipcont" :class="{done:todolist[index].done}">
					</el-col>

					<!-- 删除事项 -->
					<el-col :xs="2" :sm="1" :md="1" :lg="1" :xl="1" class="close">
					 	<i class="el-icon-close" @click="del(index)"></i>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</div>

	<script type="text/javascript">
		// 用HTML的localStorage本地存储数据
		var STORAGE_KEY = 'todolist'
		function fetch() {
			return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
		}
		function save(items){
			window.localStorage.setItem( STORAGE_KEY, JSON.stringify(items) )
		}

		// Vue实例化
		var doit = new Vue({
			el:'#app',
			data: {
				newtodo:{
					content:'',
					done: false
				},
				todolist: fetch()
			},
			methods: {
				// 添加
				add: function(){
					// 如果输入框有值
					if (this.newtodo.content) {
						this.todolist.push(this.newtodo)
						// 重置值
						this.newtodo = { content:'', done:false }
					}
				},
				// 删除
				del: function(index){
					this.todolist.splice(index,1)
				}
			},
			computed: {
				// 已完成事项的数量
				donenum: function(){
					// filter是默认会传入当前的item，而且filter的第一个参数默认就是当前的item。
					return this.todolist.filter( function( val ){
						// 查看val结构
						console.log(val) 
						return val.done
					}).length

				}
			},
			watch: {
				todolist:{
					handler(items){
						save(items)
					},
					// 深度监听：属性值的变化{{ todolist.length -  donenum}}  已完成：{{ donenum }}
					// 给所有属性添加监听器，开销较大
					deep: true
				}
			}
		})

	</script>




  <style>
     #app {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      color: #756C83;
    }

    .el-header {
      text-align: center;
    }

    .todoinput {
      margin-bottom: 40px;
    }

    .list-row {
      height: 40px;
      background-color: #fbfbfb;
      margin-bottom: 5px;
    }

    .check {
      text-align: center;
      line-height: 40px;
    }

    .red {
      border-left: #ef5f65 2px solid;
    }

    .green {
      border-left: #B9E1DC 2px solid;
    }

    .ipcont {
      width: 90%;
      margin-top: 8px;
      border: 0;
      line-height: 24px;
      background-color: transparent;
      font-size: 16px;
      color: #756C83;
    }

    .close {
      text-align: center;
      line-height: 40px;
    }

    .el-icon-close {
      cursor: pointer;
    }

    .el-icon-close:hover {
      color: #ef5f65;
    }

    .done {
      text-decoration: line-through;
    }
  </style>
</body>

</html>

​

原文：点击跳转

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支：3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区