vue3实现代办事项
时间: 2024-05-16 21:10:31 浏览: 16
Vue3 是一款流行的 JavaScript 框架,可以用来构建 Web 应用程序。以下是一个使用 Vue3 实现代办事项的简单示例:
1. 创建一个Vue实例:
```
const app = Vue.createApp({
data() {
return {
todos: [], // 代办事项列表
newTodo: '' // 输入框中的新代办事项
}
},
methods: {
addTodo() { // 添加代办事项
this.todos.push(this.newTodo)
this.newTodo = ''
},
removeTodo(index) { // 删除代办事项
this.todos.splice(index, 1)
}
}
})
```
2. 在HTML中使用Vue实例的数据和方法:
```
<div id="app">
<h1>代办事项</h1>
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo }}
<button @click="removeTodo(index)">删除</button>
</li>
</ul>
<input v-model="newTodo" placeholder="请输入新的代办事项">
<button @click="addTodo">添加</button>
</div>
```
3. 将Vue实例挂载到HTML中:
```
app.mount('#app')
```
这个简单的示例演示了如何使用 Vue3 实现一个基本的待办事项列表。用户可以在输入框中添加新的代办事项,也可以通过“删除”按钮删除现有的代办事项。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)