root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 6 Packages Projects Releases Wiki Activity

refactor(playground): replace v-show with v-if

This commit is contained in:
三咲智子 Kevin Deng 2024-01-28 01:54:26 +08:00
parent 9c9e9b2862
commit 61bec8a71d
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
playground/src/todo-mvc.vue
View File

@ -33,43 +33,51 @@ function handleClearComplete() {
function handleClearAll() { function handleClearAll() {
tasks.value = [] tasks.value = []
} }
function handleRemove(idx: number) {
tasks.value.splice(idx, 1)
}
</script> </script>
<template> <template>
<h1>todos</h1> <h1>todos</h1>
<ul> <ul>
<!-- TODO: v-for --> <!-- TODO: v-for -->
<li v-show="tasks[0]" :class="{ del: tasks[0]?.completed }"> <li v-if="tasks[0]" :class="{ del: tasks[0]?.completed }">
<input <input
type="checkbox" type="checkbox"
:checked="tasks[0]?.completed" :checked="tasks[0]?.completed"
@change="handleComplete(0, $event)" @change="handleComplete(0, $event)"
/> />
{{ tasks[0]?.title }} {{ tasks[0]?.title }}
<button @click="handleRemove(0)">x</button>
</li> </li>
<li v-show="tasks[1]" :class="{ del: tasks[1]?.completed }"> <li v-if="tasks[1]" :class="{ del: tasks[1]?.completed }">
<input <input
type="checkbox" type="checkbox"
:checked="tasks[1]?.completed" :checked="tasks[1]?.completed"
@change="handleComplete(1, $event)" @change="handleComplete(1, $event)"
/> />
{{ tasks[1]?.title }} {{ tasks[1]?.title }}
<button @click="handleRemove(1)">x</button>
</li> </li>
<li v-show="tasks[2]" :class="{ del: tasks[2]?.completed }"> <li v-if="tasks[2]" :class="{ del: tasks[2]?.completed }">
<input <input
type="checkbox" type="checkbox"
:checked="tasks[2]?.completed" :checked="tasks[2]?.completed"
@change="handleComplete(2, $event)" @change="handleComplete(2, $event)"
/> />
{{ tasks[2]?.title }} {{ tasks[2]?.title }}
<button @click="handleRemove(2)">x</button>
</li> </li>
<li v-show="tasks[3]" :class="{ del: tasks[3]?.completed }"> <li v-if="tasks[3]" :class="{ del: tasks[3]?.completed }">
<input <input
type="checkbox" type="checkbox"
:checked="tasks[3]?.completed" :checked="tasks[3]?.completed"
@change="handleComplete(3, $event)" @change="handleComplete(3, $event)"
/> />
{{ tasks[3]?.title }} {{ tasks[3]?.title }}
<button @click="handleRemove(3)">x</button>
</li> </li>
</ul> </ul>
<p> <p>