Vue实现Todo List
生活随笔
收集整理的這篇文章主要介紹了
Vue实现Todo List
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
基于Vue實現(xiàn)的Todo List
- 實現(xiàn)效果
- 完成功能
- 代碼
- 傳值解讀
實現(xiàn)效果
完成功能
- Vue 的基礎案例
- Vue 的組件
- Vue 父組件向子組件傳值
- Vue 子組件向父組件傳值
- Vue 的動態(tài)樣式綁定
- Layui 的彈窗實踐
代碼
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><title>Todo List</title><link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css"><style>ul li {list-style: circle !important;}.finished {text-decoration: line-through;}</style> </head> <body> <div id="todoApp" style="margin:1.5% 2% 0 2%"><hr><div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="schedule"><div class="layui-progress-bar" lay-percent="100%"></div></div><hr><div class="layui-form-item"><div class="layui-input-inline"><input type="text" name="input" autocomplete="off" class="layui-input" v-model="todoValue"></div><button style="float: left;" type="button" class="layui-btn layui-btn-radius layui-btn-normal"v-on:click="addItem">提交</button><button style="float: left;" type="button" class="layui-btn layui-btn-radius layui-btn-normal" disabledv-on:click="finish">完成一件</button></div><div><ul><!-- <li v-for="item in todoList">{{item}}</li>--><my-todo-item v-for="(item,index) in todoList"v-bind:item="item"v-bind:index="index"v-on:finish="finishItemHandler"></my-todo-item></ul></div></div> </body> <!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://www.layuicdn.com/layui/layui.js"></script> <script type="text/javascript">let $, element, layer;layui.use(['element', 'layer', 'jquery'], function () {$ = layui.jquery;layer = layui.layer;element = layui.element; //Tab的切換功能，切換事件監(jiān)聽等，需要依賴element模塊});Vue.component('my-todo-item', {template: "<li style='margin-left: 1rem;;margin-top: 1rem;' v-bind:class='{finished: item.finish}'>" +"{{ item.value }} " +"<button v-on:click='finishItem' style='margin-left: 1rem' type='button' class='layui-btn layui-btn-radius layui-btn-normal'>{{item.finish ? '取消完成':'完成'}}" +"</button></li>",props: ['item', "index"],methods: {finishItem: function () {this.$emit("finish", this.index);}}});let todoApp = new Vue({el: "#todoApp",data: {todoValue: "",todoList: [],index: 0,accomplish: 0},methods: {addItem: function () {if (this.todoValue.length !== 0) {const item = {id: this.index++,value: this.todoValue,finish: false};this.todoList.push(item);// 清空輸入框this.todoValue = "";// 重新計算進度條this.calcSchedule();} else {layer.msg('輸入能容為空。。。', {icon: 5});}},finish: function () {if (this.accomplish < this.todoList.length) {this.accomplish++;this.calcSchedule();}},calcSchedule: function () {// 重新計算進度條const schedule = this.accomplish / this.todoList.length * 100;//設置進度element.progress('schedule', schedule.toFixed(2) + '%');},finishItemHandler: function (index) {this.todoList[index].finish = !this.todoList[index].finish;if (this.todoList[index].finish) {this.accomplish++;} else {this.accomplish--;}this.calcSchedule();}}}); </script> </html>傳值解讀
此處todoApp可看做是父組件，my-todo-item是子組件
todoApp通過my-todo-item中的 props 將需要的值傳遞到my-todo-item中
my-todo-item中button按鈕觸發(fā)的finishItem事件向父組件發(fā)布了一個finish事件，并攜帶了 index 這個參數(shù)，而父組件使用v-on指令，監(jiān)聽了組件的finish事件并將該事件交由finishItemHandler函數(shù)處理
總結(jié)
以上是生活随笔為你收集整理的Vue实现Todo List的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ESP8266开发笔记
- 下一篇： router vue 动态改变url_v