Vue2中的进度条案例

小白丶菜狗

于 2024-07-15 14:26:34 发布

阅读量235

点赞数 8

分类专栏： Vue 文章标签： vue vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_56698546/article/details/140437847

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

v-bind对于样式控制的增强--操作style

语法： :style = “样式对象”

适用于某个具体属性的动态设置
 <div class="box" :style="{css属性名1:css属性值,css属性名2:css属性值}"></div>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 30px;
            border-radius: 50px;
            border: 1px solid #000;
        }

        .inner {
            width: 25%;
            height: 28px;
            border-radius: 50px;
            border: 1px solid #000;
            background-color: orangered;
            /*相对定位*/
            position: relative;
            /*动画*/
            transition: all 1s;

        }

        span {
            /*绝对定位*/
            position: absolute;
            right: -20px;
            bottom: -25px;
        }

        button {
            margin: 50px 20px;
            width: 80px;
            height: 30px;
        }
    </style>
</head>

<body>

    <div id="app">
        <div class="box">
            <div class="inner" :style="{width:percent + '%'}"> <!-- 动态修改percent可以修改width的宽度比例达到进度条的效果 -->
                <span>{{percent}}%</span>
            </div>
        </div>
        <button @click="percent = 25">设置25%</button>
        <button @click="percent = 50">设置50%</button>
        <button @click="percent = 75">设置75%</button>
        <button @click="percent = 100">设置100%</button>

    </div>

    <!-- 引入是开发版本的包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>


    <script>
        const app = new Vue({
            el: '#app',
            data: {
                percent: 25
            },
            methods: {

            },
        })
    </script>
</body>

</html>