Vue练习小案例之备忘录

最新推荐文章于 2024-07-25 11:52:08 发布

Grain_max

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量432

点赞数 1

文章标签： vue html javascript

本文链接：https://blog.csdn.net/qq_43819439/article/details/109790058

版权

学习Vue之做的一个小案例

仅供记录学习进度，请多指教

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            outline: none;
        }
        #app{
        	width: 500px;
            height: 350px;
            margin:  50px auto;
            background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605721212887&di=cbf0a6335a76b29eb0d3bcdaaa68fabf&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F11%2F30%2F6047090709215556672b0907c459e840.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .ipt{
            width: 200px;
            height: 20px;
            margin-top: 30px;
            margin-left: 50px;
            border:0;
            border-bottom: 1px solid #000;
            background-color: transparent;
        }
        ul{
            list-style: none;
            margin:20px 50px 0;
        }
        li{
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin-top: 10px;
          	border-bottom: 1px solid #000;
        }
        
        span{
            display: block;
            width: 400px;
            height: 20px;
            margin:20px 50px 0;
        }
        button{
            background-color:transparent;
            border: 0;
            height: 20px;
            list-style: none;
        }
        .delTs{
            float: right;
        }
        .delectLi{
            float: left;
        }
        .clearLi{
            float: right;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" class="ipt" v-model='iptVal'  @keyup.enter="getTxt" @focus='clearTxt' @blur='addTxt'>
        <ul>
            <li v-if='isClear' v-for="(item,index) in message">{{index+1}}.{{ item }} <button class="delTs" @click='delTs(index)'>X</button></li>
        </ul>
        <span class="buttom"><button class="delectLi" @click='delectLi' >删除一个</button><button class="clearLi" @click='clearLi'>清除</button></span>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                
                message:['python作业','计算机网络作业','难受不想写了'],
                iptVal:'在此输入',
                isClear:true
            },
            methods:{
                getTxt:function(){
                    this.isClear = true;
                   this.message.push(this.iptVal);
                   console.log(this.message,this.iptVal);
                },
                clearTxt:function(){
                    this.iptVal = '';
                },
                addTxt:function(){
                    this.iptVal = '在此输入';
                },
                delectLi:function(){
                    this.message.pop();
                },
                clearLi:function(){
                    this.message=[];
                    this.isClear = false;
                },
                delTs:function(index){
                    this.message.splice(index,1);
                }
             }
        })
    </script>
</body>
</html>

实现效果如图

在这里插入图片描述实现的功能有：点击删除该行，从尾部删除一行，添加（回车键，从尾部），清除全部，输入框提示字

Grain_max

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
Vue练习小案例之备忘录

学习Vue之做的一个小案例仅供记录学习进度，请多指教<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script s
复制链接

扫一扫