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>
|