Vue案例-小目标列表(上)

不懂代码的孩子
已于 2022-09-28 16:07:22 修改
阅读量211
点赞数 1
分类专栏： Vue 文章标签： html css 前端
于 2022-09-27 23:47:44 首次发布
本文链接：https://blog.csdn.net/weixin_41957626/article/details/127080958
版权
Vue 专栏收录该内容
64 篇文章 3 订阅
订阅专栏
任务案例：
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>任务案例</title>
    <style>
        /* 设置全局的字体和大小 */
        body {
            font-family: "微软雅黑";
            font-size: 14px;
        }

        /* 设置input字体大小 */
        input {
            font-size: 14px;
        }

        /* 取消padding和margin */
        body,
        ul,
        div,
        html {
            padding: 0;
            margin: 0;
        }

        /* 设置宽度，可用于居中显示 */
        .main {
            width: 800px;
            margin: 0 auto;
            border: 1px solid;
        }

        /* 设置li，取消默认的样式，设置行高，设置相对位置，设置边框 */
        li {
            list-style-type: none;
            line-height: 40px;
            /* 相对的是元素本身的位置进行的移位 */
            position: relative;
            /* transparent相当于一个透明的边框 */
            border: 1px solid transparent;
            /* 设置左右的padding看起来有点缩进 */
            padding: 0 20px;
        }

        /* 设置一个小方块 */
        li .status-span {
            display: block;
            width: 10px;
            height: 10px;
            background: #ccc;
            margin: 14px 10px 0 0;
            float: left;
        }

        /*  完成任务显示的界面*/
        li .status-end {
            background: #09f;
        }

        /* X的样式 */
        li .close {
            /* 相对父的布局 */
            position: absolute;
            color: #f00;
            font-size: 20px;
            line-height: 40px;
            height: 40px;
            /* 距离父li的右边20px */
            right: 20px;
            /* 光标呈现小手的状态 */
            cursor: pointer;
            /* 默认不显示 */
            /* display: none; */
            top: 0;
        }

        /*  鼠标经过li时候的颜色*/
        li:hover {
            border: 1px solid #09a;
        }

        /* 出现关闭的X */
        li:hover .close {
            display: block;
        }

        /* 输入任务的窗口 */
        .text-keyword {
            /* 盒子模型,加了该属性的padding和border都是计算在宽高之内了 */
            box-sizing: border-box;
            width: 100%;
            height: 40px;
            padding-left: 10px;
            /* 取消轮廓线 */
            outline: none;
        }
    </style>
</head>

<body>
    <!-- 最外层一个大div设置了居中显示和高度 -->
    <div id="app" class="main">
        <h2>小目标列表</h2>
        <div class="list">
            <h3>添加小目标</h3>
            <!-- 回车事件和双向数据绑定 -->
            <input type="text" class="text-keyword" placeholder="输入小目标后，按回车确认" @keyup.enter='addList'
                v-model="addText" />
            <!--如果noend等于0，就是全部完成了就显示‘全部完成了’，如果没有就是显示已完成多少条（prolist.length-noend）和未完成多少条（noend）-->
            <p>共有{{prolist.length}}个目标，{{noend==0?"全部完成了":'已完成'+(prolist.length-noend)+'，还有'+noend+'条未完成'}}</p>
            <p>
                <input type="radio" name="chooseType" checked="true" @click='chooseList(1)' /><label>所有目标</label>
                <input type="radio" name="chooseType" @click='chooseList(2)' /><label>已完成目标</label>
                <input type="radio" name="chooseType" @click='chooseList(3)' /><label>未完成目标</label>
            </p>
        </div>
        <ul>
            <li class="li1" v-for="(list,index) in newList">
                <!--下面使用10px*10px的实心方块（.status-span）作为改变状态的按钮-->
                <span class="status-span" @click="changeType(index)" :class="{'status-end':list.status}"></span>
                <span>{{list.name}}</span>
                <!--下面的"X"初始不显示，当鼠标悬浮时才显示-->
                <span class="close" @click='delectList(list)'>X</span>
            </li>
        </ul>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            addText: '',
            //name-名称,status-完成状态
            prolist: [
                { name: "HTML5", status: false },
                { name: "CSS3", status: false },
                { name: "vue", status: false },
                { name: "react", status: false }
            ],
            newList: [],
            curType: 0
        },
        computed: {
            //filter方法对数组所有元素依次应用回调函数，返回一个新数组，包含所有回调函数返回true的元素。
            //计算属性，返回未完成目标的条数，就是数组里面status=false的条数
            noend: function () {
                return this.prolist.filter(function (item) {
                    return !item.status
                }).length;
            }
        },
        methods: {
            addList() {
                // 添加先的清单
                //添加进来默认status=false,就是未完成状态
                this.prolist.push({
                    name: this.addText,
                    status: false
                });
                //添加后，清空addText
                this.addText = "";
            },
            // 变换清单
            chooseList(type) {
                //type=1时，选择所有目标
                //type=2时，选择所有已完成目标
                //type=3时，选择所有未完成目标
                this.curType = type;
                switch (type) {
                    newList用于保存当前显示的目标列表。
                    case 1: this.newList = this.prolist; break;
                    case 2: this.newList = this.prolist.filter(function (item) { return item.status }); break;
                    case 3: this.newList = this.prolist.filter(function (item) { return !item.status }); break;
                }
            },
            /*改变单条数据的完成状态*/
            changeType(index) {
                this.newList[index].status = !this.newList[index].status;
                //更新数据
                this.chooseList(this.curType);
            },
            // 删除指定的条目并更新list
            delectList(list) {
                var index = this.prolist.indexOf(list);
                //删除数组从index处开始的1个元素
                this.prolist.splice(index, 1);
                //加载最新数组结果
                this.chooseList(this.curType);
            }
        },
        // 显示全部任务的清单,执行顺序比较早
        mounted() {
            //newList用于保存当前显示的目标列表。
            //初始化，把prolist赋值给newList。默认显示所有目标
            this.newList = this.prolist;
        }
    });
</script>

</html>