Vue-记事本综合案例

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

文文鑫

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

阅读量769

点赞数

分类专栏： vue-前后端分离文章标签： vue

本文链接：https://blog.csdn.net/dgssd/article/details/111053089

版权

vue-前后端分离专栏收录该内容

9 篇文章 0 订阅

订阅专栏

使用vue做的记事本综合案例，初步认识相关事件的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>记事本综合案例</title>
</head>
<body>

<div id="app">
    <input type="text" v-model="msg">
    <input type="button" value="添加到记事本" @click="add">
    <br>
    <ul>
        <li v-for="a,index in list">{{index+1}} {{a}} <a href="javascript:;" @click="del(index)">删除</a></li>

    </ul>
    <hr>
    <span>总数量:{{list.length}}条</span>
    <input type="button" value="清空所有" @click="delall" v-show="list.length!=0">

</div>
<!--完成记事本的查询所有
将所有的数据完成vue绑定
完成添加，删除，总数量-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            list:["早饭5块","午饭10块","晚饭8块"],
            msg:""

        },
        methods: {
            add(){  //添加到记事本
                this.list.push(this.msg);
                this.msg='';
            },
            del(index){ //删除一条数据
                //根据下标删除数组中的某一个元素
                this.list.splice(index,1);//参数1:从哪个下标开始删除；参数2:删除几个
            },
            delall(){
                this.list=[];
            }
        }
    })
</script>
</body>
</html>

文文鑫

关注

0
点赞
踩
0

收藏

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

使用vue做的记事本综合案例，初步认识相关事件的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>记事本综合案例</title></head><body><div id="app"> <input type="text" v-model="msg"> &l
复制链接

扫一扫