vue电子书中的页面亮度是如何调节的？

最新推荐文章于 2023-10-06 10:14:38 发布

321yanqing

最新推荐文章于 2023-10-06 10:14:38 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签：自行调节亮度

本文链接：https://blog.csdn.net/qq_40319828/article/details/82878926

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

直接来代码：

    <script src="vue/dist/vue.js"></script>
    <style>
       .box{
           width: 300px;
           height: 300px;
           background-color: orangered;

       }
       .box.small{
           width: 200px;
           height: 200px;
           background-color: orchid;
       }
       .red{
           color: red;
       }
       .green{
           color:greenyellow;
       }
       .warn{
           color:gold;            
       }
      html,body,#app{
           width: 100%;
           height: 100%;
           /* background-color: #000; */
       }
       .page{
           width: 100%;
           height:100%;
           background-color: #000;
       }
    </style>
</head>
<body >
    <div id="app" >
        <div class="page"  :style="{opacity:range/100}">
            <input type="range" v-model="range"/>
        </div>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            isOver:true,
            range:100,
        },
        mothods:{

        }
    }) 
</script>

以前用js或者jq，只能实现页面的渐变，自己调节更麻烦，使用vue不仅方便，效果也更好。