Web前端vueDemo—实现记事本功能（三）

Le`soleil

已于 2022-07-21 13:25:50 修改

阅读量1.4k

点赞数 4

分类专栏： Web前端文章标签：前端 javascript vue.js

于 2022-07-20 16:09:09 首次发布

本文链接：https://blog.csdn.net/weixin_45118229/article/details/125893156

版权

Web前端专栏收录该内容

20 篇文章 2 订阅

订阅专栏

系列文章目录

Web前端vueDemo—实现简单计数器功能（一）

Web前端vueDemo—实现图片切换功能（二）

Web前端vueDemo—实现记事本功能（三）

Web前端vueDemo—实现天气预报功能（四）

前言

vue的相关配置在系列文章的第一部分中进行了配置。
此处主要使用的标签为：

v-model： 使用inputValue作为绑定的数据，在add中使用到了该字段，添加进list数组中。
v-on： 添加的点击事件。使用到三个方法，add、remove、clear。
v-show： 用于对footer中信息的隐藏，该语句也可以写在footer这个父标签上，但是隐藏后会影响整体的布局。

一、项目布局

在配置好vue的环境之后，只用创建html即可。此处为空项目。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Computible" content="ie=edge">
    <title>记事本demo</title>
</head>
<body>
    <!-- 主体区域 -->
    <section id="todoapp">
        <!-- 输入区域 -->
        <header class="header">
            <h1>记事本</h1>
            <!-- autofocus 光标定位 -->
            <input autofocus="autofocus" autocomplete="off" placeholder="请输入任务">
        </header>
        <!-- 列表区域 -->
        <section>
            <ul>
                <li>
                    <div>
                        <span>1</span>
                        <label>写代码</label>
                        <button>X</button>
                    </div>
                </li>
            </ul>
        </section>
        <!-- 统计和清空 -->
        <footer >
            <span> 1 </span>
            <button>Clear</button>
        </footer>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/dist/vue.js"></script>
    <script>
       
    </script>
</body>
</html>

二、添加功能

主要在以下两部分添加代码：
1 输入区域中： 添加add方法。
2 script中： 添加对应的add方法，使用put放入inputvalue元素。

<!-- 输入区域 -->
        <header class="header">
            <h1>记事本</h1>
            <!-- autofocus 光标定位 -->
            <input v-model="inputValue" v-on:keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务">
        </header>
<script>
        var app = new Vue({
            el:"#todoapp",
            data:{
                list:["写代码","吃饭","睡觉"],
                inputValue:"好好学习，天天向上"
            },
            methods: {
                //增加方法
                add:function(){
                    this.list.push(this.inputValue);
	            }
	        })
    </script>

三、删除功能

主要在以下两部分添加代码：
1 列表区域中： 对list进行遍历，之后在button中绑定remove方法。
2 script中： 添加对应的remove方法，使用index删除对应元素的索引值。

<!-- 列表区域 -->
        <section>
            <ul>
                <li v-for="(item,index) in list">
                    <div>
                        <span>{{index+1}}</span>
                        <label>{{item}}</label>
                        <button v-on:click="remove(index)">X</button>
                    </div>
                </li>
            </ul>
        </section>
<script>
        var app = new Vue({
            el:"#todoapp",
            data:{
                list:["写代码","吃饭","睡觉"],
                inputValue:"好好学习，天天向上"
            },
            methods: {
                //删除方法
                remove:function(index){
                    this.list.splice(index,1);
                }   
            }
        })
    </script>

四、统计和清空功能

统计只用显示list的长度即可。
清空功能分为以下两步：
1 统计和清空区域中： 对button 进行方法绑定。
2 script中： 添加对应的clear方法，直接将list的数组设为[]即可。

<!-- 统计和清空 -->
        <footer >
            <span>  {{list.length}}   </span>
            <button v-on:click="clear">Clear</button>
        </footer>
        <script>
        var app = new Vue({
            el:"#todoapp",
            data:{
                list:["写代码","吃饭","睡觉"],
                inputValue:"好好学习，天天向上"
            },
            methods: {               
                //清除数据
                clear:function(){
                    this.list = [];
                }     
            }
        })
    </script>

五、隐藏功能

在统计和清空中加入判断条件：list.length>0。

<!-- 统计和清空 -->
        <footer >
            <span v-show="list.length>0">  {{list.length}}   </span>
            <button v-if="list.length>0" v-on:click="clear">Clear</button>
        </footer>

六、项目源码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Computible" content="ie=edge">
    <title>记事本demo</title>
</head>
<body>
    <!-- 主体区域 -->
    <section id="todoapp">
        <!-- 输入区域 -->
        <header class="header">
            <h1>记事本</h1>
            <!-- autofocus 光标定位 -->
            <input v-model="inputValue" v-on:keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务">
        </header>
        <!-- 列表区域 -->
        <section>
            <ul>
                <li v-for="(item,index) in list">
                    <div>
                        <span>{{index+1}}</span>
                        <label>{{item}}</label>
                        <button v-on:click="remove(index)">X</button>
                    </div>
                </li>
            </ul>
        </section>
        <!-- 统计和清空 -->
        <footer >
            <span v-show="list.length>0">  {{list.length}}   </span>
            <button v-if="list.length>0" v-on:click="clear">Clear</button>
        </footer>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#todoapp",
            data:{
                list:["写代码","吃饭","睡觉"],
                inputValue:"好好学习，天天向上"
            },
            methods: {
                //增加方法
                add:function(){
                    this.list.push(this.inputValue);
                },
                //删除方法
                remove:function(index){
                    this.list.splice(index,1);
                },
                //清除数据
                clear:function(){
                    this.list = [];
                }     
            }
        })
    </script>
</body>
</html>