Vue---Todolist案例 - 飞行的猪哼哼

公告

导入包：

<!-- 1:导入Vue包 -->
    <script src="js/vue.js"></script>

设置预加载和Vue对象：

 <!-- 2：设置预加载和Vue对象 -->
	<script>
        window.onload = function(){
            var vm = new Vue({
                el: ".list_con",
                data : {
                    inputContent: "",
                    dataList : ["学习html","学习css","学习javascript"],
                }
            })
        }
    </script>

1：将单行文本绑定到inputcontent:

<!--1:双向绑定单行文本到inputContent  -->
        <input type="text" name="" id="txt1" class="inputtxt" v-model="inputContent">

2：如何才能让下面显示列表中的信息呢，我们要循环创建li,然后每次遍历修改span标签的内容。

<li v-for="(item,index) in dataList">
                <span>{{item}}</span>
                <a href="javascript:;" class="up"> ↑ </a>
                <a href="javascript:;" class="down"> ↓ </a>
                <a href="javascript:;" class="del">删除</a>
</li>

这样文本框下面就能显示内容了。
3：实现增加功能：点击增加按钮，本质上是向列表中增加一个记录。
当用户点击增加的时候，调用fnAdd这个函数，使用push方法追加到列表尾部。

<!-- 1：绑定点击事件，调用fnAdd函数 -->
        <input v-on:click="fnAdd" type="button" name="" value="增加" id="btn1" class="inputbtn">

fnAdd: function () {
                        //如果文本框不存在数据，则不允许插入
                        if (this.inputContent == "") {
                            alert("内容不能为空")
                            return
                        }
                        //将数据追加到列表尾部
                        this.dataList.push(this.inputContent);
                        //加入列表后，文本框重新恢复空白
                        this.inputContent = "";
                    },

4：实现删除功能：删除操作实际上是将列表中的某个数据删除：
当用户点击删除的时候，触发删除函数，函数内删除索引对应的数据。

<!-- 3：绑定fndel函数,此时必须传入一个参数index，不然不知道删除哪一个 -->
                <a  v-on:click="fnDel(index)" href="javascript:;" class="del">删除</a>

fnDel:function(index){
                        //4:从索引位置开始删除一个
                        this.dataList.splice(index,1);
                    }

5：实现向上移动的功能：
当点击上移操作时，触发上移函数，函数内先用变量保存当前位置的值，然后删除当前位置，最后插入前一个位置。

<!-- 1：当点击向上按钮时，触发向上的函数fnUp,也需要传参，记录要移动的位置 -->
                <a  v-on:click="fnUp(index)" href="javascript:;" class="up"> ↑ </a>

// 存在一个问题，如果移动到最开头，应该不能再移动了
                    fnUp:function(index){
                        if(index==0){
                            return;
                        }
                        var tmp = this.dataList[index];
                        this.dataList.splice(index,1);
                        this.dataList.splice(index-1,0,tmp);
                    },

6：实现向下移动的功能：
当点击下移操作时，触发下移函数，函数内先用变量保存当前位置的值，然后删除当前位置，最后插入后一个位置。

 <!-- 3：当点击向下按钮时，触发向下的函数fnDown,也需要传参，记录要移动的位置 -->
                <a v-on:click="fnDown(index)" href="javascript:;" class="down"> ↓ </a>

 fnDown:function(index){
                        if(index==this.dataList.length -1){
                            return;
                        }
                        var tmp = this.dataList[index];
                        this.dataList.splice(index,1);
                        this.dataList.splice(index+1,0,tmp);
                    }

整体的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <style type="text/css">
        .list_con {
            width: 600px;
            margin: 50px auto 0;
        }

        .inputtxt {
            width: 550px;
            height: 30px;
            border: 1px solid #ccc;
            padding: 0px;
            text-indent: 10px;
        }

        .inputbtn {
            width: 40px;
            height: 32px;
            padding: 0px;
            border: 1px solid #ccc;
        }

        .list {
            margin: 0;
            padding: 0;
            list-style: none;
            margin-top: 20px;
        }

        .list li {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
        }

        .list li span {
            float: left;
        }

        .list li a {
            float: right;
            text-decoration: none;
            margin: 0 10px;
        }
    </style>
    <script src="js/vue.js"></script>


    <script>
        window.onload = function () {
            var vm = new Vue({
                el: ".list_con",
                data: {
                    inputContent: "",
                    dataList: ["学习html", "学习css", "学习javascript"],
                },
                
                methods: {

                    fnAdd: function () {
                      
                        if (this.inputContent == "") {
                            alert("内容不能为空")
                            return
                        }  
                        this.dataList.push(this.inputContent);
                      
                        this.inputContent = "";
                    },
                    fnDel:function(index){

                        this.dataList.splice(index,1);
                    },
                    // 存在一个问题，如果移动到最开头，应该不能再移动了
                    fnUp:function(index){
                        if(index==0){
                            return;
                        }
                        var tmp = this.dataList[index];
                        this.dataList.splice(index,1);
                        this.dataList.splice(index-1,0,tmp);
                    },
                    fnDown:function(index){
                        if(index==this.dataList.length -1){
                            return;
                        }
                        var tmp = this.dataList[index];
                        this.dataList.splice(index,1);
                        this.dataList.splice(index+1,0,tmp);
                    }

                }
            })
        }
    </script>
    <!-- 1:实现向上移动的功能 -->
    <!-- 当点击上移操作时，触发上移函数，函数内先用变量保存当前位置的值，然后删除当前位置，最后插入前一个位置 -->
    <!-- 2：实现向下移动的功能 -->
     <!-- 当点击下移操作时，触发下移函数，函数内先用变量保存当前位置的值，然后删除当前位置，最后插入后一个位置 -->
</head>

<body>

    <div class="list_con">
        <h2>To do list</h2>

        <input type="text" name="" id="txt1" class="inputtxt" v-model="inputContent">
        
        <input v-on:click="fnAdd" type="button" name="" value="增加" id="btn1" class="inputbtn">

        <ul id="list" class="list">



            <li v-for="(item,index) in dataList">
                <span>{{item}}</span>
                <!-- 1：当点击向上按钮时，触发向上的函数fnUp,也需要传参，记录要移动的位置 -->
                <a  v-on:click="fnUp(index)" href="javascript:;" class="up"> ↑ </a>
                <!-- 3：当点击向下按钮时，触发向下的函数fnDown,也需要传参，记录要移动的位置 -->
                <a v-on:click="fnDown(index)" href="javascript:;" class="down"> ↓ </a>
                <a  v-on:click="fnDel(index)" href="javascript:;" class="del">删除</a>
            </li>


        </ul>

    </div>
</body>

</html>

posted on 2020-08-30 19:53 飞行的猪哼哼阅读(43) 评论(0) 收藏举报

刷新页面返回顶部