vue組件編寫之todolist組件實(shí)例詳解
我們?cè)趖opNav這個(gè)頁(yè)面上插入一個(gè)todolist子組件
我不知道怎么回事,這里的markdown的代碼總是串行。。所以代碼看得不舒服,見諒啊,我最后會(huì)放github的源代碼地址。
1. 父組件topNav中注冊(cè)子組件,引入子組件
<template> <div> <p>下面這一行就是定義的組件名稱</p> <todo-list></todo-list> <router-view></router-view> </div> </template> <script> /*
1. 通過import來(lái)引入我們的子組件drawerLayout
2. 引入子組件,并重新取名為todoList,然后在components組冊(cè)一下
3.在我們的template中按照html標(biāo)簽的形式使用組件,todoList就是<todo-list>
注意:
(1) 子組件的名字無(wú)所謂,但是我們引入的那個(gè)子組件名todoList,第二個(gè)單詞的首字母一定要大寫(不然你會(huì)踩坑的)
(2) 使用標(biāo)簽時(shí),todoList,就是todo-list,就是寫成駝峰命名法(通俗說就是在第二個(gè)單詞的大寫首字母改成小寫形式,然后前面加一個(gè) “-”)
*/
import todoList from '../components/todoList.vue'
export default {
components: {
todoList
},
data() {
return {
};
}
}
</script>
2. 先看看組件的功能
首先我們先大體看看組件長(zhǎng)啥樣,然后我才去構(gòu)思如何寫
首先我們看到的是一個(gè)input輸入框,默認(rèn)顯示edit..,當(dāng)我們沒有添加數(shù)據(jù)的時(shí)候,下方顯示的“暫無(wú)內(nèi)容”
接著,我們輸入數(shù)據(jù)“第一個(gè)例子”然后敲擊回車,就會(huì)出現(xiàn)一行l(wèi)ist
list包括一個(gè)單選框,文字,還有一個(gè)刪除的按鈕
那怎么刪除呢?那既然要做,肯定稍微做多一點(diǎn)功能,把一些內(nèi)部指令都用一下,我們?cè)O(shè)置的刪除規(guī)則是
先選中該list,然后點(diǎn)擊刪除,然后該條記錄就沒有了,如果刪除這個(gè)數(shù)據(jù)后,就沒有l(wèi)ist了,那“暫無(wú)內(nèi)容”就要顯示出來(lái)了
3. 開始寫我們的todo子組件了
關(guān)于代碼中的樣式我放在最后,所以此刻你可以忽略一些class
我們先把這個(gè)todolist的大體框架搭好,然后往里面增加功能
<template>
<div class="ex1">
<div class="input-text">
<label for="inputNum">請(qǐng)輸入:</label>
<input type="text"
id="inputNum"
name="inputNum"
placeholder="edit..">
<!--列表內(nèi)容-->
<ul>
<li>
<input type="checkbox" >
<span>dd</span>
<button>刪除</button>
</li>
</ul>
<p class="empty" v-if="!inputList.length">暫無(wú)內(nèi)容</p>
</div>
</div>
</template>
<script>
export default {
data () {
return {
inputList: [],
inputItem: {
content: '',
finished: false,
deleted: false
}
}
},
methods: {
//將輸入框的數(shù)據(jù)添加到list中
addItem: function() {}
//改變選中狀態(tài)
changeState: function(index) {},
//刪除列表元素
deleteItem: function(index) {}
}
}
</script>
接下來(lái)我就不針對(duì)每一小步都給出代碼來(lái)更新了,因?yàn)槠?,我?huì)更具一個(gè)功能塊來(lái)寫(我會(huì)很詳細(xì)的)
首先我們先理清以下思路
在輸入框中輸入數(shù)據(jù),按下回車就會(huì)在下方顯示一行l(wèi)ist列表(包括一個(gè)單選框,輸入的數(shù)據(jù),藍(lán)色操作按鈕)
將輸入框的值和inputItem.content進(jìn)行雙向綁定
給輸入框綁定回車事件(@keydown.13)到addItem方法中,每次輸入回車,就將輸入框的數(shù)據(jù)添加進(jìn)list列表中(inputList數(shù)組中)
利用v-for指令遍歷inputList中的值并顯示
選中單選框,list的內(nèi)容變成刪除效果(中間橫線劃過),藍(lán)色操作按鈕變成紅色刪除按鈕,點(diǎn)擊按鈕,就會(huì)刪除該列l(wèi)ist
將單選框的checked和inputItem的finished進(jìn)行綁定,綁定后就可以利用這個(gè)finished來(lái)做一些別的事了
剛添加進(jìn)列表內(nèi)容的list的按鈕是藍(lán)色操作按鈕,如果我們要通過單選框的選中與否的兩種狀態(tài)來(lái)使content的子添加和移除一個(gè)class(就是上面說的刪除效果),以及將按鈕變成紅色的刪除按鈕,那就可以綁定changeState方法來(lái)操作
那刪除功能呢?首先,我們要選中該行l(wèi)ist,再點(diǎn)擊刪除才能刪除該行數(shù)據(jù),對(duì)吧。所以我們將按鈕綁定一deleteItem方法,方法做的事情就是先檢測(cè)該行的finished是否是true,如果是true,那么我們就刪除該行數(shù)據(jù)
我們先完成添加功能:在輸入框輸入數(shù)據(jù),回車,會(huì)在下面顯示一行列表(包括單選框,輸入的數(shù)據(jù),刪除按鈕)
<template>
<div class="ex1">
<div class="input-text">
<label for="inputNum">請(qǐng)輸入:</label>
<!--@keydow.13表示回車的事件-->
<!--v-model是為了讓輸入的數(shù)據(jù)和inputItem.content同步-->
<input type="text" id="inputNum" name="inputNum" placeholder="edit.."
@keydown.13="addItem" v-model="inputItem.content" class="edit"
>
<!--列表內(nèi)容-->
<ul class="task">
<li v-for="(key, item) in inputList">
<input type="checkbox" :checked="item.finished">
<span>{{key.content}}</span>
<button class="del">刪除</button>
</li>
</ul>
<p class="empty" v-if="!inputList.length">暫無(wú)內(nèi)容</p>
</div>
</div>
</template>
<script>
export default {
data () {...省略 },
methods: {
addItem: function() {
this.inputList.push(this.inputItem);
/*
為什么我們要對(duì)inputItem再次初始化?
解答:因?yàn)槊看卧谳斎肟蛑休斎霐?shù)據(jù),都會(huì)同時(shí)改變inputItem的content屬性,
然后我們點(diǎn)擊回車,該inputItem的整個(gè)對(duì)象都添加進(jìn)inputList中,
按正常邏輯來(lái)說,inputList內(nèi)的內(nèi)容和inputItem是沒有聯(lián)系了。
如果我們此時(shí)不對(duì)inputItem進(jìn)行再次初始化,那么就會(huì)發(fā)現(xiàn)你再次在輸入框中輸入數(shù)據(jù)的時(shí)候,
會(huì)同時(shí)改變下面的list的值,簡(jiǎn)易你們把初始化的代碼去掉,運(yùn)行下試試看!
*/
this.inputItem = {
content: '',
finished: false,
deleted: false
};
},
//改變選中狀態(tài)
changeState: function(index) {},
//刪除列表元素
deleteItem: function(index) {}
}
}
</script>
我們先看看列表內(nèi)容的代碼
<!--列表內(nèi)容-->
<ul class="task">
<li v-for="(item, index) in inputList">
<!--單選框綁定了item.finished,還添加了點(diǎn)擊事件-->
<input type="checkbox"
:checked="item.finished"
@click="changeState(index)"
>
<!--通過item.finished值來(lái)動(dòng)態(tài)綁定class-->
<span :class="{'finish':item.finished}">{{item.content}}</span>
<!--按鈕的顏色通過動(dòng)態(tài)添加class來(lái)實(shí)現(xiàn),然后按鈕的文本通過改變isDel來(lái)實(shí)現(xiàn),isDel的改變也是通過changeState方法來(lái)操作的-->
<button @click="deleteItem(index)"
class="del"
:class="{'native':item.finished === true}"
>{{isDel}}</button>
</li>
</ul>
<p class="empty" v-if="!inputList.length">暫無(wú)內(nèi)容</p>
然后我們講解changeState方法
//改變選中狀態(tài)
changeState: function (index) {
// this.inputList[index].finished = true 錯(cuò)誤:這樣如果點(diǎn)擊第二次,無(wú)法回到false,就會(huì)一直true狀態(tài)
this.inputList[index].finished = !this.inputList[index].finished;
// 根據(jù)finished的值來(lái)對(duì)應(yīng)的修改isDel的值,isDel的值就是按鈕的文本
if (this.inputList[index].finished) {
this.isDel = '刪除'
}else {
this.isDel = '操作'
}
},
//刪除列表元素
deleteItem: function (index) {
if (this.inputList[index].finished) {
his.inputList.splice(index,1);
}
}
總結(jié)
以上所述是小編給大家介紹的vue組件編寫之todolist組件實(shí)例詳解,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- vue3實(shí)現(xiàn)一個(gè)todo-list
- 使用Vue完成一個(gè)簡(jiǎn)單的todolist的方法
- vue實(shí)現(xiàn)留言板todolist功能
- 詳解Vue的computed(計(jì)算屬性)使用實(shí)例之TodoList
- Vue.js實(shí)現(xiàn)一個(gè)todo-list的上移下移刪除功能
- 基于vuejs實(shí)現(xiàn)一個(gè)todolist項(xiàng)目
- vue實(shí)現(xiàn)todolist單頁(yè)面應(yīng)用
- vue實(shí)現(xiàn)ToDoList簡(jiǎn)單實(shí)例
- vue3組合式API實(shí)現(xiàn)todo列表效果
相關(guān)文章
vue-cli項(xiàng)目使用vue-picture-preview圖片預(yù)覽組件方式
這篇文章主要介紹了vue-cli項(xiàng)目使用vue-picture-preview圖片預(yù)覽組件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
vue 監(jiān)聽鍵盤回車事件詳解 @keyup.enter || @keyup.enter.native
今天小編就為大家分享一篇vue 監(jiān)聽鍵盤回車事件詳解 @keyup.enter || @keyup.enter.native,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-08-08
Vue學(xué)習(xí)之路之登錄注冊(cè)實(shí)例代碼
本篇文章主要介紹了Vue學(xué)習(xí)之路之登錄注冊(cè)實(shí)例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-07-07
el-tree樹組件懶加載(后端上千條數(shù)據(jù)前端進(jìn)行處理)
本文主要介紹了el-tree樹組件懶加載(后端上千條數(shù)據(jù)前端進(jìn)行處理),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
uniapp實(shí)現(xiàn)webview頁(yè)面關(guān)閉功能的代碼示例
uniapp用web-view打開一個(gè)網(wǎng)頁(yè),網(wǎng)頁(yè)中點(diǎn)擊跳轉(zhuǎn)到下一層級(jí)的網(wǎng)頁(yè),一層層深入,點(diǎn)擊返回鍵或者頁(yè)面上方返回按鈕只能一層層往回退,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)webview頁(yè)面關(guān)閉功能的相關(guān)資料,需要的朋友可以參考下2024-03-03

