我在 vue 上有一个应用：To Do List。如果您正在输入内容并单击添加任务，它会进入列表，该列表也带有每个项目前面的复选框。一旦标记了特定文本项的复选框，我想将文本样式设置为直通。请帮助如何在 Vue.js 上更快更容易地做到这一点？在我的代码下面：
Vue.createApp({
data(){
return{
placeholder: 'Start typing',
inputvalue: '',
notes: []
}
},
mounted() {
this.notes = JSON.parse(localStorage.getItem('note')) || [];
},
watch: {
notes: {
handler: function() {
localStorage.setItem('note', JSON.stringify(this.notes));
},
deep: true
}
},
methods: {
addnewtask(){
if (this.inputvalue !== ''){
this.notes.push(this.inputvalue)
this.inputvalue=''
}
},
removetask(index){
if (confirm('Do you really want to delete?'))
this.notes.splice(index, 1)
}
}
}).mount(app)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
</head>
<link rel="stylesheet" href="style.css">
<style>
[v-cloak] {
display:none;
}
</style>
<body>
<div class="container" id="app" v-cloak>
<div class="card">
<h1>To Do List</h1>
<div class="form-control">
<input
type="text"
v-bind:placeholder="placeholder"
v-model="inputvalue"
v-on:keypress.enter="addnewtask"
/>
<button class="btn" v-on:click="addnewtask">Add Task</button>
</div>
<hr />
<ul class="list" v-if="notes.length !== 0"...>
<li class="list-item" v-for="(note, index) in notes" v-bind:key="note">
<div>
<input type="checkbox"/>
{{index+1}}) {{note}}
</div>
<button class="btn danger" v-on:click="removetask(index)">Delete</button>
</li>
<hr />
<li>
<strong>Total: {{notes.length}}</strong>
</li>
</ul>
<div v-else>No task exist, please add first one.</div>
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="Vue3.js"></script>
</body>
</html>像这样使用条件渲染：
<span :style="todo.completed ? 'text-decoration: line-through' : ''">{{todo.title}}</span>
看看这个简单的模型：Vue Playgound
<script setup>
import { ref } from 'vue'
const todos = ref([
{title: "Milk", completed: true},
{title: "Bread", completed: false},
{title: "Cheese", completed: true},
{title: "Chicken", completed: false},
])
</script>
<template>
<template v-for="todo in todos" :key="todo.title">
<p>
<input type="checkbox" v-model="todo.completed" /> <span :style="todo.completed ? 'text-decoration: line-through' : ''">{{todo.title}}</span>
</p>
</template>
</template>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句