90 lines
2.3 KiB
Vue
90 lines
2.3 KiB
Vue
|
<template>
|
|||
|
|
<main class="page">
|
|||
|
|
<header class="hero">
|
|||
|
|
<p class="eyebrow">Vue 3 + Vite</p>
|
|||
|
|
<h1>快速上手示例</h1>
|
|||
|
|
<p class="sub">
|
|||
|
|
左边计数器，右边简单待办。直接改这里即可开始玩。
|
|||
|
|
</p>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<section class="grid">
|
|||
|
|
<article class="card">
|
|||
|
|
<header class="card__title">
|
|||
|
|
<h2>计数器</h2>
|
|||
|
|
<span class="tag">可组合</span>
|
|||
|
|
</header>
|
|||
|
|
<p class="value">{{ count }}</p>
|
|||
|
|
<div class="actions">
|
|||
|
|
<button class="ghost" @click="change(-1)">-1</button>
|
|||
|
|
<button class="primary" @click="change(1)">+1</button>
|
|||
|
|
<button class="ghost" @click="reset">重置</button>
|
|||
|
|
</div>
|
|||
|
|
</article>
|
|||
|
|
|
|||
|
|
<article class="card">
|
|||
|
|
<header class="card__title">
|
|||
|
|
<h2>待办清单</h2>
|
|||
|
|
<span class="tag success">示例</span>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<form class="todo__form" @submit.prevent="addTodo">
|
|||
|
|
<input
|
|||
|
|
v-model="draft"
|
|||
|
|
type="text"
|
|||
|
|
placeholder="输入要做的事..."
|
|||
|
|
autocomplete="off"
|
|||
|
|
/>
|
|||
|
|
<button class="primary" type="submit">添加</button>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
<ul class="todo__list" v-if="todos.length">
|
|||
|
|
<li v-for="item in todos" :key="item.id">
|
|||
|
|
<label>
|
|||
|
|
<input v-model="item.done" type="checkbox" />
|
|||
|
|
<span :class="{ done: item.done }">{{ item.text }}</span>
|
|||
|
|
</label>
|
|||
|
|
<button class="ghost small" type="button" @click="removeTodo(item.id)">
|
|||
|
|
删除
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<p v-else class="empty">暂无任务，添加一个吧！</p>
|
|||
|
|
</article>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref } from 'vue';
|
|||
|
|
|
|||
|
|
const count = ref(1);
|
|||
|
|
const change = (delta) => {
|
|||
|
|
count.value += delta;
|
|||
|
|
};
|
|||
|
|
const reset = () => {
|
|||
|
|
count.value = 1;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const draft = ref('');
|
|||
|
|
const todos = ref([
|
|||
|
|
{ id: 1, text: '试着勾选或删除我', done: false },
|
|||
|
|
{ id: 2, text: '在右上角编辑样式', done: true },
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const addTodo = () => {
|
|||
|
|
const text = draft.value.trim();
|
|||
|
|
if (!text) return;
|
|||
|
|
todos.value.push({
|
|||
|
|
id: Date.now(),
|
|||
|
|
text,
|
|||
|
|
done: false,
|
|||
|
|
});
|
|||
|
|
draft.value = '';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const removeTodo = (id) => {
|
|||
|
|
todos.value = todos.value.filter((item) => item.id !== id);
|
|||
|
|
};
|
|||
|
|
</script>
|