Class 与 Style 绑定
Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强
<span :class="{done:item.done}">{{ item.text }}</span>
如果item.done
是true,以上代码实际为
<span :class="done">{{ item.text }}</span>
如果item.done
是false,以上代码实际为
<span :class="">{{ item.text }}</span>
computed计算属性
计算属性会自动跟踪其计算中所使用的到的其他响应式状态,并将它们收集为自己的依赖。计算结果会被缓存,并只有在其依赖发生改变时才会被自动更新。
<template>
<div class="todo">
<input type="text" placeholder="new todo" v-model="newTodo">
<button @click="addTodo">Add Todo</button>
<ul>
<li v-for="item in filteredTodos" :key="item.id">
<input type="checkbox" v-model="item.done">
<span :class="{done:item.done}">{{ item.text }}</span>
<button @click="delTodo(item)">X</button>
</li>
</ul>
<button @click="hideCompleted = !hideCompleted">{{ hideCompleted ? 'show all' : 'hide completed'}}</button>
</div>
</template>
<script setup lang="ts">
import { reactive,ref,computed } from "vue";
let id = 0
let newTodo = ref()
let todoList = ref(
[
{id:id++,text:"Learn HTML",done:true},
{id:id++,text:"Learn CSS",done:false},
{id:id++,text:"Learn VUE",done:true},
]
)
let hideCompleted = ref(false)
let isHide = ref(false)
function addTodo() {
todoList.value.push({id:id++,text:newTodo.value,done:false})
newTodo.value = ''
}
function delTodo(todo) {
todoList.value = todoList.value.filter((t) => t !== todo)
}
const filteredTodos = computed(() => {
return hideCompleted.value ? todoList.value.filter((t) => !t.done) : todoList.value
})
</script>
<style>
.done {
text-decoration: line-through;
}
</style>
标签:Style,vue,todoList,text,value,item,007,done,id
From: https://www.cnblogs.com/ayubene/p/18056173