Vue实现简易备忘录

极客李华

已于 2022-10-19 16:32:59 修改

阅读量703

点赞数 1

分类专栏： Vue的学习之旅文章标签： vue.js javascript 前端

于 2022-10-10 23:35:29 首次发布

本文链接：https://blog.csdn.net/qq_51447496/article/details/127254816

版权

Vue的学习之旅专栏收录该内容

30 篇文章 2 订阅

订阅专栏

简介：本文旨在结合具体项目，让用户学会vue的button组件与个事件怎么结合。

初始代码：

<!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>案例备忘录</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 通过ref获取input中的内容 -->
        <!-- 请输入内容:<input type="text" ref="textvalue"><button @click="saveItem()">添加到备忘录</button><br> -->
        <!-- 通过v-model实现上面的功能 -->
        请输入内容:<input type="text" v-model="textvalue"><button @click="saveItem()">添加到备忘录</button><br>
        <ul>
            <li v-for="(content, index) in lists" :key="index">
                {{index + 1}}. {{content}}<a href="javascript:;" @click="deleteItem(index)">删除</a></li>            
        </ul>
        <a href="javascript:;" @click="clearAll()">清空备忘录</a>
        <h3>当前备忘录3条</h3>
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                lists:["今天上午交报名费","晚上要复习高等数学","后天有培训"] // 这个数组没有value值
            },
            methods:{
            }
        });
    </script>
</html>

设计要求：
在methods中添加三个方法，分别完成如下功能：

点击”添加到备忘录“按钮，能够将文本框中输入的项目添加到列表。方法名：saveItem()

提示：这需要给这个按钮添加绑定一个单击事件。在此事件的处理函数中需要将文本框
的value交给v-model处理。同时思考如何用Javascript对数组进行增加和删除元素操作。

点击列表中项目名称后的”删除“，能够将此条目删除掉。方法名：deleteItem()
提示：将v-for的index传递给你所写的删除函数，这样就得到了要删除的那个元素的index。
点击”清除备忘录“，列表中的所有条目都被删除掉。方法名：clearAll()

随着添加或删除操作，显示的总条数能够随之变化。

<!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>案例备忘录</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 通过ref获取input中的内容 -->
        <!-- 请输入内容:<input type="text" ref="textvalue"><button @click="saveItem()">添加到备忘录</button><br> -->
        <!-- 通过v-model实现上面的功能 -->
        请输入内容:<input type="text" v-model="textvalue"><button @click="saveItem()">添加到备忘录</button><br>
        <ul>
            <li v-for="(content, index) in lists" :key="index">
                {{index + 1}}. {{content}}<a href="javascript:;" @click="deleteItem(index)">删除</a></li>            
        </ul>
        <a href="javascript:;" @click="clearAll()">清空备忘录</a>
        <h3>当前备忘录{{lists.length}}条</h3>
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                lists:["今天上午交报名费","晚上要复习高等数学","后天有培训"] // 这个数组没有value值
            },
            methods:{
                saveItem(){
                    // 通过ref实现获取input中的内容
                    // this.lists.push(this.$refs.textvalue.value)

                    // 通过v-model实现获取input中的内容
                    this.lists.push(this.textvalue)
                },
                deleteItem(index){
                    this.lists.splice(index, 1);
                },
                clearAll(){
                    this.lists.splice(0, this.lists.length)
                }
            }
        });
    </script>
</html>

极客李华

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue实现简易备忘录

的value交给v-model处理。同时思考如何用Javascript对数组进行增加和删除元素操作。：本文旨在结合具体项目，让用户学会vue的button组件与个事件怎么结合。：这需要给这个按钮添加绑定一个单击事件。在此事件的处理函数中需要将文本框。随着添加或删除操作，显示的总条数能够随之变化。
复制链接

扫一扫