最近公司项目不忙，我终于有时间继续学习vue了，早上看了下官方文档，主要看了下指令，感觉还可以，就上手做了一个小案例，记事本功能。该案列包括以下功能：
- 输入任务按回车键，列表就会新增一条数据
- 输入完任务按回车后输入框将被清空
- 底部有总记录数和清除所有数据
- 鼠标悬浮列表上显示删除按钮可以删除数据
一、实现思路
1、通过输入框的 @keyup.enter 指令 绑定 添加方法，添加方 法中将输入的内容存到数组中保存
2、通过 v-for 指令 循环遍历数组元素并在 ul li 中动态显示出来
3、通过 v-shoow 指令与鼠标移入移出方法（@mouseover、@mouseleave） 控制删除按钮的显示与隐藏
二、实现代码
<!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>todolist</title>
<link rel="stylesheet" href="style/index.css" />
</head>
<body>
<!-- 主体区域 -->
<section id="todolist">
<!-- 头部区域 -->
<header class="header">
<h1>记事本</h1>
<input
type="text"
autofocus
autocomplete="off"
placeholder="请输入任务"
class="new_todo"
v-model="message"
@keyup.enter="add"
/>
</header>
<!-- 列表区域 -->
<section class="main" v-show="isShow">
<ul>
<li v-for="(item,index) in arr" @mouseover="mouseOver(index)" @mouseleave="mouseLeave(index)">
{{ index + 1 + '. '}} {{ item}}
<span v-show="isChecked == index + 1 ? isIconShow : false" @click="remove"><svg t="1624355982144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1214" width="30" height="30"><path d="M512 1255.489906" p-id="1215" fill="#cdcdcd"></path><path d="M718.519288 688.227064 543.827304 513.637418l174.180292-174.180292c8.801119-8.801119 8.801119-23.128523 0-31.827304-8.801119-8.801119-23.128523-8.801119-31.827304 0L512 481.810114 337.819708 307.629822c-8.801119-8.801119-23.230861-8.596442-31.929642 0.102339l0.102339-0.102339c-8.801119 8.801119-8.698781 23.026184 0.102339 31.827304l174.180292 174.180292L305.58305 688.227064c-8.801119 8.801119-8.801119 23.128523 0 31.827304 8.801119 8.801119 23.128523 8.801119 31.827304 0L512 545.464721 686.691985 720.054367c8.801119 8.801119 22.923846 8.903458 31.724965 0.102339l0.102339-0.102339C727.218069 711.355587 727.218069 697.028183 718.519288 688.227064z" p-id="1216" fill="#cdcdcd"></path></svg></span>
</li>
</ul>
</section>
<!-- 统计和清空区域 -->
<footer class="footer">
<span>{{ arr.length }} num</span>
<a href="#" @click="clear" class="clear">clear</a>
</footer>
</section>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var todolist = new Vue({
el: '#todolist',
data: {
arr: [],
index: 0,
message:'',
isShow:false,
isIconShow:false,
isChecked:0
},
methods:{
add(){
// 获取用户输入信息 并 添加到数组中
this.arr.push(this.message)
// 显示列表
this.isShow = true
// 清空输入框
this.message = ''
},
// 清除所有
clear(){
this.arr.length = 0
// 隐藏列表
this.isShow = false
},
// 鼠标移入
mouseOver(index){
this.isChecked = index + 1
this.isIconShow = true
},
// 鼠标移出
mouseLeave(index){
this.isChecked = index + 1
this.isIconShow = false
},
// 删除数组数据
remove(index){
this.arr.splice(index,1)
}
}
})
</script>
</html>
今天抽空将功能完善成 todolist ，后续会将完善的 todolist 更新上来~
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。