demo | vue写一个记事本，实现新增、删除、统计、清空等功能。

最新推荐文章于 2024-02-12 15:55:27 发布

yanwuhc

最新推荐文章于 2024-02-12 15:55:27 发布

阅读量773

点赞数 2

分类专栏： web前端文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_44303404/article/details/108146422

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近再学Vue.js，跟着视频做了个简单的记事本，整理了一下笔记。
写一个简易记事本，内容包括新增、删除、统计、清空、隐藏。分析如下：

新增：

首先需要一个数组来存储新增的数据：textArr。

使用v-model设置和获取用户的输入，绑定的数据会和表单元素的值相关联。即：text。

使用v-on同时使用回车事件（@keyup.enter）触发函数新增元素。

使用v-for将添加的内容逐一显示出来。

<input type="text" v-model="text" @keyup.enter="add">
<ul>
    <li v-for="(item,index) in textArr">
        {{ item }} 
    </li>
</ul>

add函数：

add:function(){
    if(this.text!=null){
        this.textArr.push(this.text);
        // 回车后清空内容
        this.text=null;
    }else{
        alert("请在文本框中输入内容");
    }
}

删除

通过v-on绑定按钮触发删除函数。

用数组中的splice方法执行删除逻辑。

<input type="button" value="删除" @click="remove(index)">

remove函数：

remove:function(index){
	this.textArr.splice(index,1);
}

统计

统计的实质是获取数组的长度，可以调用列表的length属性获取数组长度。

<li>{{ textArr.length }} items</li>

清空

清空的实质是使列表为空列表。通过v-on触发清空函数。

<input type="button" value="clear" @click="allClear">

allClear函数：

allClear:function(index){
	this.textArr = [];
}

隐藏

为了美观，当没有输入的时候，下面一栏可以不显示，使用v-show和v-if都可以实现。

<li v-show="textArr.length!=0">{{ textArr.length }} items
<input type="button" value="clear" @click="allClear" v-show="textArr.length!=0">
</li>

完整html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小黑记事本demo</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
<style>
    li{
        list-style: none;;
        align-content: left;
    }
    .test{
        border: red 1px solid;
    }
</style>
<body>
    <div id="app">
        <h1>小黑记事本</h1>
        <!-- 输入对话框 -->
        <input type="text" v-model="text" @keyup.enter="add">
        <ul>
            <li v-for="(item,index) in textArr">
                {{ item }} 
                <input type="button" value="删除" @click="remove(index)">
            </li>
            <!-- 空格分开 -->
            <li>&nbsp</li>
            <li v-show="textArr.length!=0">{{ textArr.length }} items
                <input type="button" value="clear" @click="allClear" v-show="textArr.length!=0">
            </li>
        </ul>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data() {
                return {
                    text:"输入你想做的事情",
                    textArr:[],
                    isShow:null,
                }
            },
            methods: {
                add:function(){
                    if(this.text!=null){
                        this.textArr.push(this.text);
                        // 回车后清空内容
                        this.text=null;
                    }else{
                        alert("请在文本框中输入内容");
                    }
                },
                remove:function(index){
                    this.textArr.splice(index,1);
                },
                allClear:function(index){
                    this.textArr = [];
                },
            },
        })
    </script>
</body>
</html>

yanwuhc

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
demo | vue写一个记事本，实现新增、删除、统计、清空等功能。

最近再学Vue.js，跟着视频做了个简单的记事本，整理了一下笔记。写一个简易记事本，内容包括新增、删除、统计、清空、隐藏。分析如下：新增：首先需要一个数组来存储新增的数据：textArr。使用v-model设置和获取用户的输入，绑定的数据会和表单元素的值相关联。即：text。使用v-on同时使用回车事件（@keyup.enter）触发函数新增元素。使用v-for将添加的内容逐一显示出来。<input type="text" v-model="text" @keyup.enter="add
复制链接

扫一扫

专栏目录