電子書中的頁面亮度是如何調節的？
阿新 • • 發佈：2018-12-12
直接來程式碼：
<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不僅方便，效果也更好。