Vue實現背景更換顏色操作
阿新 • • 發佈:2020-07-18
如下所示:
<!-- 分頁上下頁改變背景圖效果 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script> <style type="text/css" media="screen"> .page{ list-style: none; } .page>li{ float: left; margin-left: 10px; } .page>li>a{ text-decoration: none; } .active{ color: red; text-decoration: display; } div{ width: 500px;height: 500px; } </style> </head> <body > <div id="app" v-bind:style="{backgroundColor:bgCol}"> <ul class="page"> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="decrease" >上一頁</a> </li> <li v-for="n in totalPage"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-bind:class="n==activeNum?'active':''">{{n}}</a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="increase">下一頁</a> </li> </ul> </div> <script type="text/javascript"> var exampleData={ //msg:"Hello Vue",bgCol:"#DB8623FF",totalPage:10,activeNum:3,} var app = new Vue({ el:'#app',data:exampleData,methods:{ decrease:function(){ this.activeNum==1?'':this.activeNum-=1; this.bgCol=this.getRandom(); },increase:function(){ this.activeNum==10?'':this.activeNum+=1; this.bgCol=this.getRandom(); },getRandom:function(){ var r=Math.floor(Math.random()*256); var g=Math.floor(Math.random()*256); var b=Math.floor(Math.random()*256); var a=Math.random().toFixed(1); return `rgba(${r},${g},${b},${a})` } } }) </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>自定義指令實現隨機背景</title> <style type="text/css" media="screen"> #app{ width: 999px; height: 999px; } </style> </head> <body> <h3>自定義指令</h3> <div id="app" v-change-background-color="myBgColor"> <h3 > <input type="text" v-model="myBgColor" placeholder="請輸入16進位制顏色"> </h3> </div> <script src="../node_modules//vue/dist/vue.js"></script> <script> var exampleData = { myBgColor: "#5FCA34",}; new Vue({ el: "#app",data: exampleData,methods:{ getRandom:function(){ var r=Math.floor(Math.random()*256); var g=Math.floor(Math.random()*256); var b=Math.floor(Math.random()*256); var a=Math.random().toFixed(1); return `rgba(${r},${b})` } },directives: { changeBackgroundColor: { bind: function(el,bindings) { //el:指定繫結dom元素 h3dom物件 //bindings:自定義指令物件 //v-change-background-color="myBgColor" //bindings.value;=="#ff0000" var r=Math.floor(Math.random()*256); var g=Math.floor(Math.random()*256); var b=Math.floor(Math.random()*256); var a=Math.random().toFixed(1); el.style.backgroundColor =`rgba(${r},${a})`; console.log("繫結成功"); },update: function(el,bindings) { console.log('已更新資料'); var r=Math.floor(Math.random()*256); var g=Math.floor(Math.random()*256); var b=Math.floor(Math.random()*256); var a=Math.random().toFixed(1); el.style.background = `rgba(${r},${a})` },//更新資料 } } }); </script> </body> </html>
補充知識:vue統一設定了背景色,單獨改變某一頁的背景色
有時我們會遇到單獨改變某個元件的背景填充色,而我們已經在index.html中引入了公用的css樣式(body中設定了背景色),由於單個元件沒有body標籤,於是要修改單個元件的背景色只需新增如下程式碼即可。
beforeCreate () { document.querySelector('body').setAttribute('style','margin: 0 auto; width: 100%; max-width: 750px;min-width: 300px; background:#171b2a; overflow-x: hidden;height: 100%;'); }
以上這篇Vue實現背景更換顏色操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。