精华内容
下载资源
问答
  • vue点击改变背景颜色
    千次阅读
    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

    更多相关内容
  • 主要介绍了用vue简单的实现点击按钮切换背景颜色,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • <template> <div class="pageBgc" @click="changeBgc" :style="{background:...点我切换颜色</li> </ul> </div> </template> <script> export default { data() { .
    <template>
      <div class="pageBgc" @click="changeBgc" :style="{background:colorIndex}">
          <ul>
              <li>点我切换颜色</li>
          </ul>
      </div>
    </template>
    
    <script>
    export default {
     
      data() {
        return {
            colorSet : ['gold','skyblue','red'],
            colorIndex:0
        };
      },
     
      methods: {
          changeBgc(){
              let colorRender = Math.floor(Math.random() * this.colorSet.length); //随机数
              this.colorIndex = this.colorSet[colorRender]; //拿到数组里的颜色
              
          }
      },
    };
    </script>
    
    <style scoped lang="less">
        .pageBgc{
            width: 100%;
            height: 100vh;
            background: skyblue;
        }
    </style>
    
    
    
    

     

    展开全文
  • -- 分页上下页改变背景图效果 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> ...
  • 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 官方文档: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单页面背景颜色修改

    千次阅读 2021-07-29 11:00:44
    最近在做项目中,使用vue开发移动端项目,遇到一个小问题,路由跳转同时修改当前页面的背景色。 下面简单说一下vue单页面应用,由于vue的单页面应用导致我们的项目只有一个index.html文件,然而我们若想改变页面的...
  • vue 点击按钮改变颜色

    千次阅读 2022-02-28 11:29:26
    效果图 代码 <!...Vue 改变颜色</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="app"> <div v.
  • vue简单的实现点击按钮切换背景颜色 <div class="btnTitle"> <div class="btn-bg" :class="{bg:time == 3}" @click="changeBg(3)">15天</div> <div class="btn-bg" :class="{bg:time == 4...
  • Vue 点击列表切换颜色

    2022-01-18 00:08:36
    · 点击列表切换颜色 · v-bind 和 v-for 1. 效果展示 2. 代码 <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta ...
  • 一、背景颜色 1.最终效果: 2.代码: 二、字体大小 1.最终效果:
  • Ant Design vue 改变表格背景颜色

    千次阅读 2021-01-18 15:05:53
    写这篇文章之前,我已经和经理掰扯半天了。...使用rowClassName属性实现改变背景颜色: 表格属性 <a-table :rowClassName="rowClassName"> JS代码: methods: { rowClassName(record,index
  • @click="selected(index)"> {{ item.name}} </button> tagList:[ { name:" 111" }, { name:" 222" }, { name:" 333" }, { name:" 444" } ], active: 0, selected(index){ //把index值赋给active,点击改变样式 this....
  • vue+element 主题背景颜色更换demo
  • vue修改表格表头背景颜色,样式

    千次阅读 2022-01-27 15:25:29
    :header-cell-style="{background: '#C4C4C4'}
  • vue表格根据属性值设置背景颜色vue表格设置鼠标悬浮背景颜色第一种方法:row-class-name第二种方法:cell-class-name第三种方法:(cell-class-name和row-class-name)都可以第一种方法代码第二种方法代码第三种...
  • 开发时,遇到一个需求,点击左边栏卡片时,改变卡片字体颜色和背景颜色,并调用接口,在右边展示数据。该小文本着记录在工作中学习和解决问题的思路,并非最佳方式。
  • Vue动态渲染背景颜色

    千次阅读 2020-03-07 14:33:59
    <input type="button" class="code" :style="{'background':' #'+clor}" value="获取验证码"> data:{ clor:"195F53" }
  • 想要实现的效果如下: 代码实现如下: &lt;el-col :span="12" class="text-l"&gt; &lt;div class="jieogu-common" :class="{jiegou:changeActive ...margin-left: 7
  • 然后根据颜色颜色选择器,选择的颜色动态改变 $store.state.xxx ,以达到改变背景色跟字体颜色的目的。 <template> <div> <!-- leftbackground 跟 leftcolor是我自定义设置的 --> <div :...
  • Vue 修改单个组件的背景颜色

    千次阅读 2021-07-04 18:16:28
    组件默认背景颜色为白色,但工作需要改成黑色,于是研究了一番。 很简单,只需在组件中使用两个钩子函数beforeCreate (),beforeDestroy () 代码如下: beforeCreate () { document.querySelector('body')....
  • 开始 data() { return { showStartColor: true, startColor:{background:"white"}, } }, methods: { showStartPage() { this.showStartColor = !this.showStartColor }, }
  • <div class="reverse-imgdiv" v-bind:style="{ background: activeColor }" 在setup里面修改activeColor即可
  • <button @click="buttonClick(1)" :class="buttonIndex == 1?'bgcolor':''">月</button> <button @click="buttonClick(2)" :class="buttonIndex == 2?'bgcolor':''">季</button>...
  • vue修改body颜色

    2022-02-09 16:22:23
    // body背景颜色 document.querySelector("body").setAttribute("style", "background-color:#ebebeb"); }, beforeDestroy() { document.querySelector("body").removeAttribute("style"); },
  • 下面小编就为大家分享一篇Vue实现点击后文字变色切换方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue点击div更换颜色

    千次阅读 2020-05-22 15:03:32
    vue点击div更换颜色 <template> <div class="box" :class="boxColor =! boxColor"></div> </template> <script> export default { data (){ return { boxColor: false ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,765
精华内容 4,306
关键字:

vue点击改变背景颜色