Vue實(shí)現(xiàn)背景更換顏色操作
如下所示：
<!-- 分頁(yè)上下頁(yè)改變背景圖效果 --><!DOCTYPE html><html><head><meta charset='utf-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'><title></title><link rel='stylesheet' href='http://www.cgvv.com.cn/bcjs/11328.html'><script type='text/javascript' src='http://www.cgvv.com.cn/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 v-bind:style='{backgroundColor:bgCol}'><ul class='page'><li> <a href='http://www.cgvv.com.cn/bcjs/11328.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' v-on:click='decrease' >上一頁(yè)</a> </li><li v-for='n in totalPage'><a href='http://www.cgvv.com.cn/bcjs/11328.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' v-bind:class='n==activeNum?’active’:’’'>{{n}}</a></li><li><a href='http://www.cgvv.com.cn/bcjs/11328.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' @click='increase'>下一頁(yè)</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>自定義指令實(shí)現(xiàn)隨機(jī)背景</title> <style type='text/css' media='screen'> #app{ width: 999px; height: 999px; } </style></head><body> <h3>自定義指令</h3> <div v-change-background-color='myBgColor'> <h3 > <input type='text' v-model='myBgColor' placeholder='請(qǐng)輸入16進(jìn)制顏色'> </h3> </div> <script src='http://www.cgvv.com.cn/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},${g},${b},${b})` } }, directives: { changeBackgroundColor: { bind: function(el, bindings) { //el:指定綁定dom元素 h3dom對(duì)象 //bindings:自定義指令對(duì)象 //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},${g},${b},${a})`; console.log('綁定成功'); }, update: function(el, bindings) { console.log(’已更新數(shù)據(jù)’); 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},${g},${b},${a})` }, //更新數(shù)據(jù) } } }); </script></body></html>
補(bǔ)充知識(shí)：vue統(tǒng)一設(shè)置了背景色，單獨(dú)改變某一頁(yè)的背景色
有時(shí)我們會(huì)遇到單獨(dú)改變某個(gè)組件的背景填充色，而我們已經(jīng)在index.html中引入了公用的css樣式（body中設(shè)置了背景色），由于單個(gè)組件沒有body標(biāo)簽，于是要修改單個(gè)組件的背景色只需添加如下代碼即可。
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實(shí)現(xiàn)背景更換顏色操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 測(cè)試模式 - XSL教程 - 52. 用xslt+css讓RSS顯示的跟網(wǎng)頁(yè)一樣漂亮3. CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果 仿百度貼吧3D翻牌一次動(dòng)畫特效4. 《CSS3實(shí)戰(zhàn)》筆記--漸變?cè)O(shè)計(jì)（一)5. 移動(dòng)端HTML5實(shí)現(xiàn)拍照功能的兩種方法6. 讓chatgpt將html中的圖片轉(zhuǎn)為base64方法示例7. html5手機(jī)觸屏touch事件介紹8. ASP.NET Core自定義中間件的方式詳解9. ASP.NET MVC把數(shù)據(jù)庫(kù)中枚舉項(xiàng)的數(shù)字轉(zhuǎn)換成文字10. 教你JS更簡(jiǎn)單的獲取表單中數(shù)據(jù)(formdata)
網(wǎng)公網(wǎng)安備