課程
/前端開發(fā)
/HTML/CSS
/vue3.0實現(xiàn)todolist
求助,已完成的數(shù)量和清除已完成這部分,已經(jīng)蒙了。
2021-10-21
源自:vue3.0實現(xiàn)todolist 4-7
正在回答
這個是footer里的代碼。我跑了是沒有問題的,不知道你是哪里有問題啊?
<template>
<div class="container">
<div>completed{{ isComplete }} / total {{ list.length }}</div>
<div v-if="isComplete > 0" class="btn">
<button @click="clear">clear completed</button>
</div>
</template>
<script>
import { defineComponent, ref, computed } from "vue";
export default defineComponent({
name: "navFooter",
props: {
//父組件從vuex中,拿出list的數(shù)據(jù)
//然后傳給子組件,子組件就展示
list: { type: Array, required: true },
},
setup(props, ctx) {
//過濾已完成
let isComplete = computed(() => {
let arr = props.list.filter((item) => {
return item.complete;
});
return arr.length;
// let all = ref(3);
let clear = () => {
//過濾未完成,
return item.complete === false;
ctx.emit("clear", arr);
// console.log("clear");
};
return {
isComplete,
// all,
clear,
</script>
<style lang="scss" scoped>
.container {
display: flex;
align-content: center;
}
.btn {
margin-left: 10px;
</style>
舉報
通過todolist實戰(zhàn)案例全方位學(xué)習vue3.0
1 回答為什么報錯啊qwq求助大佬
1 回答寫完之后只有樣式 ,功能沒有響應(yīng)是正常的嗎
1 回答課程代碼可以提供嗎?
1 回答創(chuàng)建 vue3項目最后一步報錯
1 回答大家有類似報錯么
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2022-04-25
這個是footer里的代碼。我跑了是沒有問題的,不知道你是哪里有問題啊?
<template>
<div class="container">
<div>completed{{ isComplete }} / total {{ list.length }}</div>
<div v-if="isComplete > 0" class="btn">
<button @click="clear">clear completed</button>
</div>
</div>
</template>
<script>
import { defineComponent, ref, computed } from "vue";
export default defineComponent({
name: "navFooter",
props: {
//父組件從vuex中,拿出list的數(shù)據(jù)
//然后傳給子組件,子組件就展示
list: { type: Array, required: true },
},
setup(props, ctx) {
//過濾已完成
let isComplete = computed(() => {
let arr = props.list.filter((item) => {
return item.complete;
});
return arr.length;
});
// let all = ref(3);
let clear = () => {
//過濾未完成,
let arr = props.list.filter((item) => {
return item.complete === false;
});
ctx.emit("clear", arr);
// console.log("clear");
};
return {
isComplete,
// all,
clear,
};
},
});
</script>
<style lang="scss" scoped>
.container {
display: flex;
align-content: center;
}
.btn {
margin-left: 10px;
}
</style>