Vue侦听器的使用

最新推荐文章于 2024-03-13 14:46:19 发布

@二十六

最新推荐文章于 2024-03-13 14:46:19 发布

阅读量386

点赞数 1

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

本文链接：https://blog.csdn.net/qq_44212319/article/details/104599657

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue侦听器小练习——进度条

Vue中的侦听器可以侦听data中数据的变化，并做出操作。下面是使用Vue的侦听器写的一个进度条的小demo。每完成一件事，进度条都会自动更新。
当我们需要提示用户填写信息的完整度时，就可以使用侦听器，判断用户填写了多少信息，然后除以总信息条数，就可以提示用户了。
在这里插入图片描述

<!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">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(to right, #22c1c3, #fdbb2d);
        }
        #app{
            width: 460px;
            padding: 10px;
            border: 1px solid white;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #414141;
        }
        .container{
            width: 100%;
            height: 20px;
            margin-top: 15px;
            font-size: 14px;
            display: flex;
        }
        .container > p{
            width: 60px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            margin-right: 10px;
            border: 1px solid white;
            color: white;
        }
        .rate{
            width: calc(100% - 70px);
            height: 100%;
            border: 1px solid white;
        }
        .rate > div{
            width: 0%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.2);
            transition-property: "width";
            transition-duration: 0.5s;
            transition-timing-function: linear;
        }
        ul{
            width: 100%;
            margin-top: 15px;
            list-style: none;
        }
        li{
            width: 100%;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
            font-size: 14px;
        }
        li > p{
            width: calc(100% - 70px);
            height: 30px;
            padding: 0 5px;
            line-height: 30px;
            background-color: rgba(255, 255, 255, 0.2);
        }
        li > div{
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.2);
        }
        li > div:hover{
            cursor: pointer;
        }
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>Vue侦听器</p>
        <div class="container">
            <p v-cloak>{{ info }}</p>
            <div class="rate">
                <div ref="rate"></div>
            </div>
        </div>
        <ul>
            <li>
                <p>Thing 1</p>
                <div @click.once="done">Done</div>
                <!-- @click.once设置事件修饰符，让div只能被点击一次 -->
            </li>
            <li>
                <p>Thing 2</p>
                <div @click.once="done">Done</div>
            </li>
            <li>
                <p>Thing 3</p>
                <div @click.once="done">Done</div>
            </li>
            <li>
                <p>Thing 4</p>
                <div @click.once="done">Done</div>
            </li>
        </ul>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.5/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            num: 0,
            info: "0%"
        },
        // 侦听器
        watch: {
            // 侦听data中的num
            // 当num发生变化时，下面的函数就会执行
            num:function(){
                // console.log("侦听到了num的变化");
                this.info = this.num * 25 + "%";
                this.$refs.rate.style.width = Number(this.$refs.rate.style.width.slice(0, -1)) + 25 + "%";
            }
        },
        methods: {
            done:function(event){
                // event.currentTarget为当前点击的DOM元素
                event.currentTarget.innerHTML = "✔";
                if(this.num < 4){
                    this.num++;
                }else{
                    alert("已完成！");
                }
            }
        },
    });
</script>
</html>

@二十六

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue侦听器的使用

Vue侦听器小练习 Vue中的侦听器可以侦听data中数据的变化，并做出操作。下面是使用Vue的侦听器写的一个进度条的小demo。每完成一件事，进度条都会自动更新。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view...
复制链接

扫一扫