【Vue】案例——To do list：

一、案例介紹：
二、效果展示（如圖）
三、主要功能：
四、技術要點：
- - 補充：【Vue】Vue模板語法(點擊可跳轉)
  - 補充：【Vue】數據綁定（單雙向）(點擊可跳轉)
五、代碼解析：
- - 1.body部分
  - 2.script部分
  - 3.CSS樣式部分

一、案例介紹：

這個案例是一個簡單的待辦事項列表（To Do List）應用，使用了 Vue.js 框架來實現動態數據綁定和交互功能。用戶可以在輸入框中輸入待辦事項，并通過點擊“增加”按鈕將其添加到列表中。待辦事項會以列表的形式展示在頁面上，用戶還可以通過點擊“刪除”鏈接來移除特定的事項。

二、效果展示（如圖）

在這里插入圖片描述

三、主要功能：

1.添加待辦事項：用戶輸入內容并點擊“增加”按鈕，內容會被添加到待辦事項數組中；
2.刪除待辦事項：用戶可以點擊每個事項旁邊的“刪除”鏈接來移除該事項；
3.輸入驗證：在添加事項時，應用會檢查輸入是否為空或是否已存在于列表中，并給出相應的提示；

四、技術要點：

1.使用 Vue.js 進行數據綁定和事件處理；
2.利用 v-model 指令實現輸入框與數據的雙向綁定；
3.使用 v-for 指令動態渲染待辦事項列表；

五、代碼解析：

1.body部分

在這里插入圖片描述

<body><div id='app'><div class="box"><!-- 如何獲取輸入框內容，如何將獲取到的內容展示到頁面上 【將內容保存到數組中去】--><h3>To do list</h3><div class="list_con"><input type="text" v-model="txt"><button @click="add()">增加</button></div><div class="list"><!-- 連續出現的標簽、標簽塊1.將標簽、標簽塊重寫一遍2.將重復出現的標簽、標簽塊里面的“內容”保存到數組中去3.將v-for寫在重復出現標簽、標簽塊身上--><ul><li v-for="item in arr"><span>{{item}}</span><!-- 點擊刪除時候如何指定元素 --><a href="javascript:;" @click="del(index)">刪除</a></li></ul></div></div></div></body>

2.script部分

在這里插入圖片描述

<script>new Vue({el: '#app',data: {txt: "",    // 保存input框的內容arr: ["學習html", "學習css", "學習javascript"]},methods: {// 增加功能add() {// this.txt    // 輸入框輸入的內容// push:將內容添加到數組最后一項   pop:刪除數組最后一項// unshift:將內容添加到數組最前面一項   shift:刪除數組最前面一項if (this.txt.trim() == '') {alert("請輸入內容，再進行添加！")return} else if (this.arr.includes(this.txt.trim())) {alert("該內容已存在，請重新輸輸入其他內容")this.txt = ''} else {this.arr.unshift(this.txt)this.txt = ''}},// 刪除功能// 定義函數給形參，調用函數給實參del(index) {// splice(操作的元素的索引值，刪除個數，添加的內容)this.arr.splice(index, 1);}}})
</script>

3.CSS樣式部分

在這里插入圖片描述

    <style>.box {margin: 10px auto;width: 600px;}.list_con input {width: 540px;}.list ul {padding: 0;}.list li {list-style: none;border-bottom: 1px solid #ccc;padding: 15px 0;}.list li a {float: right;text-decoration: none;}</style>

案例——To do list整體代碼如下：

<!DOCTYPE html>
<html><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"><title>To do list2</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><style>.box {margin: 10px auto;width: 600px;}.list_con input {width: 540px;}.list ul {padding: 0;}.list li {list-style: none;border-bottom: 1px solid #ccc;padding: 15px 0;}.list li a {float: right;text-decoration: none;}</style>
</head><body><div id='app'><div class="box"><!-- 如何獲取輸入框內容，如何將獲取到的內容展示到頁面上 【將內容保存到數組中去】--><h3>To do list</h3><div class="list_con"><input type="text" v-model="txt"><button @click="add()">增加</button></div><div class="list"><!-- 連續出現的標簽、標簽塊1.將標簽、標簽塊重寫一遍2.將重復出現的標簽、標簽塊里面的“內容”保存到數組中去3.將v-for寫在重復出現標簽、標簽塊身上--><ul><li v-for="item in arr"><span>{{item}}</span><!-- 點擊刪除時候如何指定元素 --><a href="javascript:;" @click="del(index)">刪除</a></li></ul></div></div></div></body>
<script>new Vue({el: '#app',data: {txt: "",    // 保存input框的內容arr: ["學習html", "學習css", "學習javascript"]},methods: {// 增加功能add() {// this.txt    // 輸入框輸入的內容// push:將內容添加到數組最后一項   pop:刪除數組最后一項// unshift:將內容添加到數組最前面一項   shift:刪除數組最前面一項if (this.txt.trim() == '') {alert("請輸入內容，再進行添加！")return} else if (this.arr.includes(this.txt.trim())) {alert("該內容已存在，請重新輸輸入其他內容")this.txt = ''} else {this.arr.unshift(this.txt)this.txt = ''}},// 刪除功能// 定義函數給形參，調用函數給實參del(index) {// splice(操作的元素的索引值，刪除個數，添加的內容)this.arr.splice(index, 1);}}})
</script></html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/77050.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/77050.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/77050.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！