Vue实现简易todolist

最新推荐文章于 2024-09-12 11:32:50 发布

大风起兮云飞扬丶

最新推荐文章于 2024-09-12 11:32:50 发布

阅读量262

点赞数

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

本文链接：https://blog.csdn.net/weixin_45932565/article/details/104237084

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

通过单击添加按钮，将输入框中的值添加到下面，可删除，也可重新编辑。具体效果如图：
在这里插入图片描述
具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            background-color: gainsboro;
            border: none;
            height:40px;
            width:200px;
            border-radius: 20px;
            padding:0 10px;
        }
        #app{
            margin-left: 100px;
            margin-top: 100px;
        }
        button{
            background-color: gainsboro;
            border: none;
            height:30px;
            width:60px;
            border-radius: 5px;
        }
        li{
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="ipt" id="ipt">
        <button @click="addBtn">添加</button>
        <ul>
            <li v-for="(item, index) in arr" :key="index">
                {{index}}.{{item}}
                <button @click="delBtn(index)">删除</button>
                <button @click="updBtn(index)">编辑</button>
                
            </li>
        </ul>
    </div>


<script>
    var app = new Vue({
        el:"#app",
        data:{
            ipt:"",
            arr:[],
            isup:false,//点击编辑时的状态,一开始是添加状态，
            num:0
        },
        methods: {
            addBtn(){
                if(this.ipt!=""){
                  if(this.isup==false){//添加状态
                        this.arr.push(this.ipt);//将ipt的值push到数组中
                        this.ipt=""//将ipt 设为空
                  }else{//编辑状态
                      this.arr[this.num]=this.ipt;//数组的第num 位, 也就是Index位,将ipt的值给它 
                      this.isup=false;
                      this.ipt=""
                  }
                  
                }               
            },
            delBtn(index){
                this.arr.splice(index,1)
            },
            updBtn(index){
                 this.ipt=this.arr[index];//点击添加按钮时，将该行的值  赋给ipt
                 this.num=index;//将该行的index传给num
                 this.isup=true;//
            }
        },
    })
</script>
</body>
</html>