Vue： ----- 记事本案例

最新推荐文章于 2023-01-18 15:13:47 发布

姜同学的学习笔记

最新推荐文章于 2023-01-18 15:13:47 发布

阅读量582

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45764675/article/details/108729950

版权

Vue 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

开发环境参考本人vue博客

记事本综合案例步骤

完成记事本的查询所有功能：（1）将所有数据绑定给vue实例（2）遍历vue实例中数据到页面
添加：添加按钮绑定事件、在事件中获取输入框的数据、将数据放入list中
删除: 在删除按钮处获取下标index 定义点击事件方法在方法中将list的下标删除
删除所有：将list定义为[]，并且list.length长度不是0才展示删除所有按钮
总数量：就是list.length的长度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>记事本综合案例</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="mes">
    <button @click="add">添加记事本</button>
    <br/>
    <ul>
        <li v-for="l,i in list">
            {{l}} <a href="javascript:;" @click="deleteRow(i)">删除</a>
        </li>
    </ul>
    <br/>
    <span>总数量：{{list.length}} 条  </span>
    <button v-show="list.length!=0" @click="deleteAll">删除所有</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            list: ["北京好好学习网络有限公司", "北京天天向上网络有限公司", "北京不打游戏网络有限公司", "北京不处对象网络有限公司"],
            mes: ""
        },
        methods: {
            add() {
                if (this.mes!=""){
                    console.log(this.mes);
                    this.list.push(this.mes);
                }
                this.mes = ""
            },
            deleteRow(i) {
                this.list.splice(i, 1);//参数1 从哪个下标开始删除  参数2 删除几个元素
            },
            deleteAll() {
                this.list = []
            }
        }
    });
</script>
</body>
</html>

初始界面

在这里插入图片描述

添加java c++

在这里插入图片描述

点击删除

在这里插入图片描述

点击删除所有

姜同学的学习笔记

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue： ----- 记事本案例

开发环境参考本人vue博客记事本综合案例步骤完成记事本的查询所有功能：（1）将所有数据绑定给vue实例（2）遍历vue实例中数据到页面添加：添加按钮绑定事件、在事件中获取输入框的数据、将数据放入list中删除: 在删除按钮处获取下标index 定义点击事件方法在方法中将list的下标删除删除所有：将list定义为[]，并且list.length长度不是0才展示删除所有按钮总数量：就是list.length的长度<!DOCTYPE html><html lang="
复制链接

扫一扫