精华内容
下载资源
问答
  • 2022-02-21 09:50:15

    这样就得到了背景颜色的随机数 可以通过 :style 动态绑定backgroundColor实现

    更多相关内容
  • 主要介绍了用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>
    
    
    
    

     

    展开全文
  • 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简单的实现点击按钮切换背景颜色

      <div class="btnTitle">
          <div class="btn-bg" :class="{bg:time == 3}" @click="changeBg(3)">15</div>
          <div class="btn-bg" :class="{bg:time == 4}" @click="changeBg(4)">30</div>
      </div>
      <div class="btnTitle">
           <div class="btn-bg" :class="{bg:increase == 5}" @click="changeBg(5)">增量</div>
           <div class="btn-bg" :class="{bg:increase == 6}" @click="changeBg(6)">总量</div>
       </div>
       // 在methods方法里面
       data () {
       			time: 3,
          		increase: 5, 
       },
        methods: {
        changeBg (index) {
          if (index === 3 || index === 4) {
            this.time = index
          } else if (index === 5 || index === 6) {
            this.increase = index
          } else {
            this.sort = index
          }
        }
      }
      // css样式
      <style lang="scss">
    		.bg {
    		      background-color: rgb(12, 197, 89);
    		       color: #fff;
    	     }
    	     .btnTitle {
                 display: flex;
                 width: 400px;
                 border: 1px solid #ccc;
                 background-color: #fff;
                 margin-left: 10px;
                 border-radius: 5px;
                 .btn-bg {
                     width: 50%;
                     height: 40px;
                     text-align: center;
                     line-height: 40px;
                     border-radius: 5px;
                 }
             }
      </style>
    

    点击前
    在这里插入图片描述
    点击后
    在这里插入图片描述
    就这样简单的切换效果就达到了!!!!

    展开全文
  • 一、背景颜色 1.最终效果: 2.代码: 二、字体大小 1.最终效果:

    一、背景颜色

    1.最终效果:

    2.代码:

    主要思路就是利用less变量控制主题颜色

      <!-- 先写出来可供选择的主题切换按钮 -->
               <div class="backColor">
                背景颜色:
                <i
                  v-for="(item, index) in skinState.data"
                  :key="index"
                  :class="['color-box', item]"
                  @click="skinState.change(item)"
                >
                </i>
              </div>
     //将colorData的数据正好写成三个class名 使用的时候就可以直接item用
        const skinState = reactive({
          data: ['back1', 'back2', 'back3'],
          curSkin: 'back1',
          change: (item: string) => {
            skinState.curSkin = item
          }
        })

     使用的时候就是将对应的背景加上动态的class名

       <div :class="['m-left',  skinState.curSkin]">
              <!-- 通过改变class名来对应切换背景颜色 -->
              <div class="m-head">
               
              </div>
              <ul class="m-card" >
               
              </ul>
              
              </div>

     css:  (这里只写了m-card  如果想让比如说上面的m-head也随着

    
    <style scoped lang="less">
    @BackColor1: #ffffff;
    @BackColor2: #fffbf3;
    @BackColor3: #fcfffa;
    @cardColor1: #f7f8fa;
    @cardColor2: #fff6e4;
    @cardColor3: #f1f8ec;
    .back1 {
      background: @BackColor1;
      .m-card {
        background: @cardColor1;
      }
    }
    .back2 {
      background: @BackColor2;
      .m-card {
        background: @cardColor2;
      }
    }
    .back3 {
      background: @BackColor3;
      .m-card {
        background: @cardColor3;
      }
    }
    </style>

    还有很多可以完善的地方 比如说封装成一个组件什么的  目前只是一个简单的粗糙的写法

    二、字体大小

    1.最终效果:

    script:

       const fontSizeRef = ref()//方法使用于哪些文字 就在哪个div里加上一个这样的ref
       const fontSizeState = reactive({
          curSize: 16, //字体大小介于16-24之间 默认为16
          //当超过24或者小于24  出现警告并停止调用
          sizeChange: (type: string) => {
            if (type === 'smaller' && fontSizeState.curSize < 18) {
              alert('已经缩小到最小')
              return
            }
            if (type === 'bigger' && fontSizeState.curSize > 22) {
              alert('已经放大到最大')
              return
            }
            fontSizeState.curSize =
              type === 'smaller'
                ? fontSizeState.curSize - 2
                : fontSizeState.curSize + 2
            fontSizeRef.value.style.fontSize = String(fontSizeState.curSize + 'px')
          }
        })

    html使用:

      <!-- 改变字体大小 -->
              <div class="fontSizeChange">
                <i @click="fontSizeState.sizeChange('smaller')"></i>
                <i @click="fontSizeState.sizeChange('bigger')"></i>
              </div>
      <!-- 适用文字范围 -->
              <div class="m-lawContent" ref="fontSizeRef">
              </div>

    展开全文
  • 下面小编就为大家分享一篇Vue实现点击后文字变色切换方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Vue实现背景更换颜色操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue点击切换颜色

    2021-10-25 11:22:12
    记录一下:点击可动态切换颜色。 代码 <div id="app"> <ul> <li v-for="(item,index) in movies" :class="{active:currentIndex === index}" @click="liclick(index)"> <!-- === 类似于...
  • Vue 点击列表切换颜色

    2022-01-18 00:08:36
    · 点击列表切换颜色 · v-bind 和 v-for 1. 效果展示 2. 代码 <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta ...
  • 点击切换背景色,同时切换组件,一套完整的代码示例。喜欢的小伙伴点个赞 <template> <div> <div class="bottom"> // 使用element 中的card 生成卡片 <el-card class="box-card"> <...
  • vue 路由切换 并修改背景图片
  • vue切换背景颜色

    千次阅读 2020-01-07 18:49:22
    vue中,遇到不同页面需要不同的背景的情况 1.app.vue中声明样式 .page { background-color: #fff; padding: 11.7333vw 0 13.3333vw; padding-top: calc(11.7333vw + 24px); } .page1 { background: #f7fafc; // ...
  • Vue点击切换颜色

    万次阅读 热门讨论 2018-01-08 16:21:01
    &lt;template&gt; &lt;div&gt; &lt;div v-for="(list,index) in siYuan" class="aa" :class="{ red:changeRed == index}" @click="change(index)"...
  • 主要介绍了利用Vue的v-for和v-bind实现列表颜色切换,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 父组件 <div class="list-content" v-for="(item ,i) in projectList" :key="i"> <project-list :isActive="isActive" :curIndex='i' :project="item" @clickItem="handleItem(i)" />...
  • 1.实现目标效果 点击切换背景图于文字颜色 2.css部分代码 .afterActiveTitle { color: #ffffff; background-image: url("~@/assets/xxx/xxx.png"); background-size:100% 100% ; border-bottom: 2px solid #9bb...
  • CSS Vue 切换背景颜色

    千次阅读 2019-05-18 14:31:11
    原文演示及链接:https://codepen.io/richardtallent/pen/yvpERW/ <template> <div class="theme" :style="bgProps"> <div class="btn">...input type="color" v-...
  • 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实现点击列表切换并改变颜色 实现效果图如下 通过Vue的父子组件传值实现效果,单击切换颜色会进性改变并添加下划线 父组件代码实现(Home.vue) 需要进性对子组件的导入 import TabControl from ‘@/components/...
  • VUE点击按钮切换字体颜色

    千次阅读 2020-07-16 16:47:50
    前几天我朋友在学vue,在写一个关于点击按钮切换字体颜色的demo,我于是就看了一下, 按照我的想法我是这么写的 代码如下: <template> <div> <p :class="{a: !isShow,b: isShow}">RUNNING MAN<...
  • antd表格切换演示 代码(左侧表格) //html <a-table :columns="courseColumns" :data-source="coursedList" :pagination="false" :scroll="{y: 500 }" :rowKey="(record,index)=>{return index}" :...
  • vue实现点击列表切换颜色

    千次阅读 2020-07-13 09:07:21
    vue实现点击列表切换颜色
  • <el-button class="selectall" :style="activeall" type="info" @click="selectall" >全选菜单</el-button > data(){ return :{ v:true } } methods..
  • 01.Vue中通过点击div更改背景颜色(本人新手,记录学习过程) 通过v-bind:class 实现 <div id="app"> <div :class="{active : currentIndex == index}" v-for="(item,index) in info" @click="divCLick...
  • vue 官方文档:https://cn.vuejs.org/v2/api/ 一:选项 el:挂载点 类型:string | Element data:数据 类型:Object | Function methods:方法 类型:{ [key: string]: Function } <!--方法和函数区别: --> ...
  • 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 ...
  • vue 切换主题颜色

    2021-08-25 17:36:37
    切换背景色–sass // test.sass $bmg1:red; $bmg2:black; $bmg3:green; $bmg4:purple; @mixins changes($color){ background:$color; [data-theme='backgroundcolor1']&{ background:$bmg1; } [data-theme...
  • 开始 data() { return { showStartColor: true, startColor:{background:"white"}, } }, methods: { showStartPage() { this.showStartColor = !this.showStartColor }, }

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,979
精华内容 1,591
关键字:

vue点击切换背景颜色