vue3天气预报项目实战开源代码
时间: 2024-01-31 08:11:06 浏览: 32
很抱歉,根据提供的引用内容,我没有找到关于Vue3天气预报项目的实战开源代码。但是,我可以为您提供一个基于Vue3的待办清单项目的实战开源代码,供您参考。
以下是一个基于Vue3的待办清单项目的实战开源代码:
```vue
<template>
<div>
<h1>待办清单</h1>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新任务" />
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo }}
<button @click="removeTodo(index)">删除</button>
</li>
</ul>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
name: 'TodoList',
setup() {
const todos = ref([]);
const newTodo = ref('');
const addTodo = () => {
if (newTodo.value.trim() !== '') {
todos.value.push(newTodo.value);
newTodo.value = '';
}
};
const removeTodo = (index) => {
todos.value.splice(index, 1);
};
return {
todos,
newTodo,
addTodo,
removeTodo,
};
},
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
```
这是一个简单的待办清单项目,您可以在输入框中添加新的任务,并且可以删除已完成的任务。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)