當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue实现Todo List

發布時間：2024/4/11 vue 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue实现Todo List 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

基于Vue實現的Todo List

實現效果
完成功能
代碼
傳值解讀

實現效果

完成功能

Vue 的基礎案例
Vue 的組件
Vue 父組件向子組件傳值
Vue 子組件向父組件傳值
Vue 的動態樣式綁定
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><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>  <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的切換功能，切換事件監聽等，需要依賴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按鈕觸發的finishItem事件向父組件發布了一個finish事件，并攜帶了 index 這個參數，而父組件使用v-on指令，監聽了組件的finish事件并將該事件交由finishItemHandler函數處理

總結

以上是生活随笔為你收集整理的Vue实现Todo List的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。