精华内容
下载资源
问答
  • vue动态改变div背景颜色
    千次阅读
    2022-05-18 16:58:58

    由于vue的单页面应用导致我们的项目只有一个index.html文件,然而我们若想改变页面的背景色美酒必须动态改变body的背景色才是最直观最有效的解决方案。

    废话不多说直接上代码,亲测百分之百有效:

    <template>
      <div>
        
      </div>
    </template>
     
    <script>
    export default {
      data() {
        return {};
      },
      mounted(){},
      methods: {},
      //实例创建之前钩子函数--给body添加行内样式
      beforeCreate () {
        this.$nextTick(()=>{
          document.body.setAttribute('style', 'background:#EAECF1')
        })
      },
      //实例销毁之前钩子--移除body 标签的属性style
      beforeDestroy () {
        document.body.removeAttribute('style')
      }
    };
    </script>
     
    <style lang="scss" scoped></style>

    下面说下为什么要在beforeCreate钩子内部用this.$nextTick钩子包裹,this.$nextTick的作用是dom完全加载完成,所以我们改变body背景颜色是在操作dom

    更多相关内容
  • 动态改变div背景

    绘制页面

    在这里插入图片描述

    通过监听RGB值得变化改变div背景色

    changeDivStyle(){
      document.getElementById("changeDiv").style.background= 'rgb('+ this.animationForm.red+','+ this.animationForm.green+','+this.animationForm.blue+')';
    },
    

    效果

    在这里插入图片描述

    展开全文
  • 01.Vue中通过点击div更改背景颜色(本人新手,记录学习过程) 通过v-bind:class 实现 <div id="app"> <div :class="{active : currentIndex == index}" v-for="(item,index) in info" @click="divCLick...

    1. 通过v-bind:class={‘类名’ : ‘返回一个bool值’} 实现(待完善:当再次点击已被选择的div时,未返回初始颜色)
    <div id="app">
      <div :class="{active : currentIndex == index}"
           v-for="(item,index) in info"
           @click="divCLick(index)">{{item}}
      </div>
    </div>
    
    <script>
      /**
       *  设置currentIndex=0  获取当前点击的div下标值
       *    ①:currentIndex = 0时,
       *        :class="{active : currentIndex (0) == index (0)}  返回true,第一个默认显示背景颜色
       *       而其他两个div:
       *        :class="{active : currentIndex (1) == index (0)}  返回false,没有应用css样式
       *        :class="{active : currentIndex (2) == index (0)}  同上
       * */
      const vm = new Vue({
        el: "#app",
        data: {
          currentIndex : 0,
          info : ['div1','div2','div3']
        },
        methods : {
          divCLick(index){
            this.currentIndex = index
          }
        }
      })
    </script>
    
    1. 通过v-bind:style={‘样式属性’ : ‘属性值’} 实现(缺陷:当点击一个div后,点击下一个div时,上一个点击的div背景颜色未改变)
    <div id="app">
      <div v-for="(item,index) in info"
      @click="divClick(index)"
      :style="colorDiv(index)">{{item.name}}</div>
    
    <!-- 不使用computed 
    :style="{backgroundColor : info[index].isActive == true ? 'green' : 'white' " -->
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          info : [
            {name : 'div1',isActive : false},
            {name : 'div2',isActive : false},
            {name : 'div3',isActive : false}
          ]
        },
        methods : {
          divClick(index){
            this.info[index].isActive = !this.info[index].isActive ;
          }
        },
    
        /** vue中computed计算属性无法直接进行传参,如果有传参数的需求可以使用闭包函数(也叫匿名函数)实现。 */
        computed : {
          colorDiv() {
            return function (index) {
              return this.info[index].isActive == true ? {backgroundColor : 'green'} : {backgroundColor: 'white'}
            }
          }
        }
      })
    </script>
    
    1. v-bind:style 解决上方缺陷
      更改divClick中对应代码:
    methods : {
          divClick(index){
            /** 当 “点击” 一个“已被点击”的div时 使该div恢复默认色 */
            for(let i in this.info){
              if(index == i){
                this.info[i].isActive = !this.info[i].isActive
              }else this.info[i].isActive = false;
            }
          }
        }
    
    展开全文
  • vue_案例_点击div的时候,改变背景

    千次阅读 2022-05-08 22:13:31
    vue 官方文档:https://cn.vuejs.org/v2/api/ 一:选项 el:挂载点 类型:string | Element data:数据 类型:Object | Function methods:方法 类型:{ [key: string]: Function } <!--方法和函数区别: --> ...

    需求一:
    有几个div,当点击哪个div的时候给这个div一个背景色,点击相同div的时候,去掉背景色.
    案例一:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Document</title>
    </head>
    <body>
    	<div id="app">
    		<div v-for="(item,index) in divData" @click="divClick(index,item)" :style="item.isActive == true ? { backgroundColor: 'red' } : { backgroundColor: 'white' }">
    			{{item.name}}div
    		</div>
    	</div>
    	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    	<script>
    		let vm = new Vue({
    			el: '#app',
    			data: {
    				divData: [
    					{ id: 1, name: '第一个', isActive: false },
    					{ id: 2, name: '第二个', isActive: false },
    					{ id: 2, name: '第三个', isActive: false }
    				]
    			},
    			methods: {
    				divClick(index, val) {
    					/** 当 “点击” 一个“已被点击”的div时 使该div恢复默认色 */
    					for (let i in this.divData) {
    						if (index == i) {
    							this.divData[i].isActive = !this.divData[i].isActive
    						} else {
    							this.divData[i].isActive = false;
    						}
    					}
    				},
    			},
    		})
    	</script>
    </body>
    </html>
    

    案例二:(这个方法比较简单)
    初始状态下,第一个背景色是红色,以后点击哪个,哪个变为红色

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Document</title>
    	<style>
    	.active{
    		color:red;
    	}
    	</style>
    </head>
    <body>
    	<div id="app">
    	<ul>
    		<li v-for="(item,index) in divData" @click="liClick(index)" :class="{active:currentIndex === index}">
    			{{index}}{{item}}
    		</li>
    	</ul>
    	</div>
    	<script src="js/vue.js"></script>
    	<script>
    		let vm = new Vue({
    			el: '#app',
    			data: {
    				divData: ['海王','海贼王','加勒比海盗','海尔兄弟'],
    				currentIndex:0,// 记录状态的变量
    			},
    			methods: {
    				liClick(index) {
    				 this.currentIndex = index;
    				},
    			},
    		})
    	</script>
    </body>
    </html>
    
    展开全文
  • vue简单的实现点击按钮切换背景颜色,具体代码如下所示: <div class=btnTitle> <div class=btn-bg class={bg:time click=changeBg(3)>15天</div> <div class=btn-bg class={bg:time click=changeBg(4)>30天</...
  • Vue动态修改Style背景

    千次阅读 2022-02-17 17:26:53
    <div class="reverse-imgdiv" v-bind:style="{ background: activeColor }" 在setup里面修改activeColor即可
  • 今天利用Vue自定义指令-做个div根据输入框输入的颜色变化背景色的效果图,注意的是,输入的颜色只针对英语和16进制的颜色,输入中文无效。代码奉上: &lt;!DOCTYPE html&gt; &lt;html&gt; &...
  • vue动态改变元素的背景颜色

    万次阅读 2019-04-09 14:20:20
    初期绑定一个值背景颜色透明,监听子组件的事件,改变data里面的值来改变背景色 代码 <el-main ref="elMain" v-bind:style="elMain"> <el-card class="main-card"> <slot></slot> <...
  • vue动态修改主题颜色

    千次阅读 2021-12-02 23:28:16
    创建一个theme.json文件,分别定义变量名称以及对应颜色,比如字体、背景、边框颜色等 { "white":{ "--maintextcolor": "#000000", "--mainbgcolor": "#ffffff", "--mainbordercolor":"1px s
  • 1.后台数据 data:[{type:1,name:"好看"}, ...2.根据style属性进行判断动态改变背景颜色 <view class="card" v-for="(item,index ) in data" :key="index" :style="{'background':item.type===1?'#d04d24':item.t
  • vue动态设置背景渐变色

    千次阅读 2022-03-28 15:44:07
    vue动态设置背景渐变色
  • 关于vue/uni-app修改页面背景色(小程序内)踩坑实录!
  • vue 随机背景颜色

    2022-07-11 17:51:30
    vue
  • 绑定:style <div id="app"> <div v-for="item in items"> <span :style="{'color':item.color}">item.name</span> </div> </div> <...var vue = n...
  • 一、背景颜色 1.最终效果: 2.代码: 二、字体大小 1.最终效果:
  • vue表格根据属性值设置背景颜色vue表格设置鼠标悬浮背景颜色第一种方法:row-class-name第二种方法:cell-class-name第三种方法:(cell-class-name和row-class-name)都可以第一种方法代码第二种方法代码第三种...
  • 如果要实现,当鼠标移到div层上时,改变背景色,我试了好多方法,只有这个方法可行,百度上其他的似乎有问题,暂且这样说吧。
  • mounted (){ document.... zhongjian用来记录上一个被点击的div 该功能实现了,但是现在新的问题来了,js会改变div的hover样式 解决方法在下面这个帖子: https://blog.csdn.net/qq_30815659/article/details/123584310
  • 另外的要求,利用事件委派完成 如何做到鼠标放到全部商品分类也会触发底下图书、音响的背景颜色 改变一下结构 在全部商品分类和三级联动的外面加一个div父亲 然后我们把刚刚加到一级分类里面的鼠标移除事件添加到...
  • <template> <div class="pageBgc" @click="changeBgc" :style="{background:...点我切换颜色</li> </ul> </div> </template> <script> export default { data() { .
  • Vue根据状态改变背景色,当状态为正常时背景色为青色,状态为库存不足时背景色为红色,当油品为柴油时背景色为蓝色 <ul class="conert-list"> <li v-for="item in initData2" :key="item.code"> <h3 class="shang">{...
  • vue中点击对应div(span、li)改变颜色

    千次阅读 2020-10-13 15:19:06
    vue中点击后改颜色 一 点击后改变颜色的原因: :class="{active:真值}" 时,显示样式 :class="{active:假值}" 时,不显示样式 二 具体代码实现: 1 在data中添加一个值作为判断的介质 data(){ return{ ...
  • vue单页面背景颜色修改

    千次阅读 2021-07-29 11:00:44
    下面简单说一下vue单页面应用,由于vue的单页面应用导致我们的项目只有一个index.html文件,然而我们若想改变页面的背景色美酒必须动态改变body的背景色才是最直观最有效的解决方案。 废话不多说直接上代码,亲测百...
  • Vue - 每个页面单独设置 body 背景色(独立修改单个页面的背景色,不同页面设置不同的背景颜色),为不同页面设置body背景颜色vue 单独页面body css 样式设置,vue.js 每个页面page自定义body颜色,vue中怎么修改...
  • 然后根据颜色颜色选择器,选择的颜色动态改变 $store.state.xxx ,以达到改变背景色跟字体颜色的目的。 <template> <div> <!-- leftbackground 跟 leftcolor是我自定义设置的 --> <div :...
  • 效果 完成一级分类动态添加背景颜色 第一种解决方案:采用css样式 <!-- 商品分类导航 --> <div class="type-nav"> <div class="container"> 全部商品分类</h2> <nav class="nav"> 服装城</a> 美妆馆</a> 尚品汇超市...
  • 通过动态绑定style,声明css变量"--bgColor",把变量”color”赋给“--bgColor” <div ref="chart-circle" class="chart-circle" :style="{ '--bgColor': color }"></div> 在css中使用 var函数 ...
  • VUE实现DIV点击换色

    千次阅读 2021-01-06 22:14:58
    VUE实现点击DIV背景换色 VUE实现DIV点击换色 这个方法初衷是为了代替button做一个更加自由添加图标标题之类的按钮来代替tab页签,所以后续还可以绑定一些自己的事件,如跳转页面,窗口弹出. 先写DIV和CSS样式. <...
  • 背景图片定义声明的地方,就要用require引用,而不是在赋值的地方。如下图解释 data() { return { testArray: [ { name: 'test1', id: 1, key: 1, isClicked: false, url: require('../images/bg-test1....
  • <template v-slot="{row}"> <span :style="{'color':(row.configStatus=='0'?'#67C23A':'red')}"> {{row.configStatus==0?"正常":row.configStatus==1?"已失效":"未知状态" }} ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,441
精华内容 2,176
热门标签
关键字:

vue动态改变div背景颜色