乐趣区

关于vue.js:vue-简单指令使用实现记事本案例

jiezi

最近公司我的项目不忙，我终于有工夫持续学习 vue 了，早上看了下官网文档，次要看了下指令，感觉还能够，就上手做了一个小案例，记事本性能。该案列包含以下性能：

  1. 输出工作按回车键，列表就会新增一条数据
  2. 输出完工作按回车后输入框将被清空
  3. 底部有总记录数和革除所有数据
  4. 鼠标悬浮列表上显示删除按钮能够删除数据

一、实现思路

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 更新上来~

退出移动版