精华内容
下载资源
问答
  • vue点击按钮改变背景颜色
    千次阅读
    2020-11-07 15:33:28

    <button @click="buttonClick(1)" :class="buttonIndex == 1?'bgcolor':''">月</button>
    <button @click="buttonClick(2)" :class="buttonIndex == 2?'bgcolor':''">季</button>
    <button @click="buttonClick(3)" :class="buttonIndex == 3?'bgcolor':''">年</button>
    
    
    
    
    data(){
        buttonIndex:1,
    }
     methods:{
        buttonClick(buttonIndex){
              this.buttonIndex = buttonIndex
          }, 
    }
    .bgcolor {
         background-color: #0066FF;
         border: 0;
         outline: none;
     }
    button {
        padding:0.2rem 1.2rem ;
         background: #4E6FFF;
        border: 0;
        color: white;
        border-radius:0 ;
    }
    button:focus{outline:0;} 

     

    更多相关内容
  • 主要介绍了用vue简单的实现点击按钮切换背景颜色,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 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.

     效果图

    代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 改变颜色</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
    <div id="app">
    	<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">{{message}}</div>
      <button @click="reverseColor1">红色</button>
      <button v-on:click="reverseColor2">绿色</button>
      <button v-on:click="reverseColor3">蓝色</button>
    </div>
    <script>
    new Vue({
      el: '#app',
      data: {
        message:'你好',
        activeColor: 'green',
    	fontSize: 30,
      },
      methods:{
        reverseColor1: function () {
          this.activeColor='red'
        },
        reverseColor2: function () {
          this.activeColor='green'
        },
        reverseColor3: function () {
          this.activeColor='blue'
        }
      }
    })
    </script>
    </body>
    </html>

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

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

    展开全文
  • @click="selected(index)"> {{ item.name}} </button> tagList:[ { name:" 111" }, { name:" 222" }, { name:" 333" }, { name:" 444" } ], active: 0, selected(index){ //把index值赋给active,点击改变样式 this....
  • 随机颜色 点击切换 <button @click="btn">点击</button> <div :style="{color:colorRender}" >内容</div> data(){ return{ listColor:['red','blue','yellow','pink','green'], ...
  • vue 官方文档:https://cn.vuejs.org/v2/api/ 一:选项 el:挂载点 类型:string | Element data:数据 类型:Object | Function methods:方法 类型:{ [key: string]: Function } <!--方法和函数区别: --> ...
  • 01.Vue中通过点击div更改背景颜色(本人新手,记录学习过程) 通过v-bind:class 实现 <div id="app"> <div :class="{active : currentIndex == index}" v-for="(item,index) in info" @click="divCLick...
  • 想要实现的效果如下: 代码实现如下: &lt;el-col :span="12" class="text-l"&gt; &lt;div class="jieogu-common" :class="{jiegou:changeActive ...margin-left: 7
  • 下面小编就为大家分享一篇Vue实现点击后文字变色切换方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 当前Vue项目需要做一个按钮切换的功能(点击A号button,背景色变化;点击B号button,A号回复原背景色,B变色) =====》 实现上述功能,最基础的方法就是,动过获取对应的dom,强制改变背景色: <div ...
  • <template> <div class="first-app"> <el-button-group> <el-button size="mini" @click="setAlertSeverity('')" :class="currentSeverity==''?'activeBtn':'normalBtn'">...
  • Vue的hover/click事件动态改变颜色背景色父组件内容 父组件内容 <head-bar-item path="/home" :changeColor="{color: '#dc5d48', bgColor: '#373833'}"> <template v-slot:item-text>首页</...
  • 想要实现的功能:当两个输入框都不为空的时候,登录按钮颜色高亮,并且可以触发点击事件,否则,登录按钮变暗,不能触发提交等等事件 思路: 登录按钮颜色变化和禁用状态都是依赖于两个输入框的value值的变化,...
  • <el-table :data="tableData" border @cell-click="cellclick" :cell-style="tableCellStyle"> </el-table> data(){ row:'', column:'' } cellclick (row, column...tableCellStyle (row, rowIndex, colu
  • vue点击改变样式 直接看代码 有我没有写清楚的地方欢迎留言 我偶们一起讨论!!! <template> <div> <div v-for="(item, index) in nameoptions" :class="{ active: index == isActive }" @...
  • vue单选按钮,选中改变其当前按钮颜色 html: <span v-for="(item,index) in state" :key="index" @click="leftChange(index)" :class="{ liBackground:changeLeftBackground == index}"> {{item}} &l...
  • Document{{v.level}}:style="{background:btnsClickBol[i][j]?'red':''}"@click="onClick(i,j)">{{key}}newVue({el:'#app',data:{items:[],btnsClickBol:[],},created(){//延迟模拟ajax请求setTimeout(...
  • 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实现点击列表切换并改变颜色 实现效果图如下 通过Vue的父子组件传值实现效果,单击切换颜色会进性改变并添加下划线 父组件代码实现(Home.vue) 需要进性对子组件的导入 import TabControl from ‘@/components/...
  • vue--el-tree树图点击节点上的某一个按钮,固定并且修改节点的背景颜色
  • <el-button class="selectall" :style="activeall" type="info" @click="selectall" >全选菜单</el-button > data(){ return :{ v:true } } methods..
  • vue点击实现背景高亮

    2022-07-19 08:45:23
    vue中或者uni中 点击 改变背景颜色 实现点击区域高亮显示实现对比效果
  • 本文主要给大家介绍了如何更改Dialog的标题与按钮颜色的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 android.support.v7.app.AlertDialog 在这个类中第一行就定义了如下变量: ...
  • 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 ...
  • 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...
  • 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)"...
  • 2, ‘background’ 背景 3, item.flag (item:for循环的循环体,.flag:集合中的属性) 4, item.flag === false (item.flag这个值是否 === flag) :style="{'background':item.flag === false ? '#FFFFFF':'#F56C6...

空空如也

空空如也

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

vue点击按钮改变背景颜色