vue+element-ui入门例子todolist（粘贴可用）

效果图
代码及其注释：
<!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>
原文：点击跳转
vue+element-ui入门例子todolist（粘贴可用）

猜你喜欢
