vuejs修改背景色的方法：1、在index.html中引入公用的css样式；2、通过添加“beforeCreate () {…}”代码修改单个组件的背景色即可。
本文操作环境：windows7系统、vue2.5.17版、Dell G3电脑。
vuejs怎么修改背景色？
Vue实现背景更换颜色操作
如下所示：
立即学习“前端免费学习笔记（深入）”；
nbsp;html>.page{list-style: none;}.page>li{float: left;margin-left: 10px;}.page>li>a{text-decoration: none;}.active{color: red;text-decoration: display;}p{width: 500px;height: 500px;}
登录后复制 上一页 {{n}}下一页 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})`}}})
nbsp;html>自定义指令实现随机背景 #app{ width: 999px; height: 999px; }自定义指令
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对象 //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},${g},${b},${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},${g},${b},${a})` }, //更新数据 } } });
登录后复制
补充知识：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教程》
以上就是vuejs怎么修改背景色的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3019561.html
