精华内容
下载资源
问答
  • vue点击按钮切换颜色
    千次阅读
    2019-10-26 15:01:04
     <style type="text/css">
            div#box{
                width: 100px;
                height: 100px;
                color: darkgray;
            }
            .red{
                background-color: red;
    
            }
            .blue{
                background-color: blue;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <button @click="isRed=!isRed">点我切换颜色</button>
    
        <div id="box" v-bind:class="{red:isRed,blue:!isRed}"> 
            我是盒子
    
        </div>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
       const app=new Vue({
           el:"#app",
           data:{
    
               isRed:true
               
           }
           
       });
    </script>

    要点:class要转变为vue的属性,加上v-bind:或者:,class的值可以是一个对象,对象里面可以写多个属性,借助button改变isRed的值来改变颜色。

     

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

    展开全文
  • 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学习视频链接
    记录一下:点击可动态切换颜色。

    代码

        <div id="app">
            <ul>
                <li v-for="(item,index) in movies" 
                :class="{active:currentIndex === index}"
                @click="liclick(index)">
                <!-- === 类似于 == -->
                    {{index}}.{{item}}
                </li>
            </ul>
        </div>
        <script src="/LocalCode/VueDemo/vue_test1/jar/vue.js"></script>
        <script>
        const app=new Vue({
            el:'#app',
            data:{
                movies:['海贼王','死神','火影忍者'],
                currentIndex:0
            },
            methods:{
            <!--监听点击事件获取参数index-->
                liclick(index){
                    this.currentIndex=index
                }
            }
        })
        </script>
    
        <style>
            .active{
                color:royalblue;
            }
        </style>
    

    原为 active:true,active 这个 class 存在与否将取决于是否为true。
    运行后显示的效果是全部变色,说明已经被写死,改为动态的就是新增一个变量currentIndex即可。
    当点击到哪一个数据就返回此数据的index,index绑定点击事件@click:liclick(index)
    active:currentIndex === index

    展开全文
  • VUE点击按钮切换字体颜色

    千次阅读 2020-07-16 16:47:50
    前几天我朋友在学vue,在写一个关于点击按钮切换字体颜色的demo,我于是就看了一下, 按照我的想法我是这么写的 代码如下: <template> <div> <p :class="{a: !isShow,b: isShow}">RUNNING MAN<...

    前几天我朋友在学vue,在写一个关于点击按钮切换字体颜色的demo,我于是就看了一下,
    按照我的想法我是这么写的
    代码如下:

    <template>
      <div>
        <p :class="{a: !isShow,b: isShow}">RUNNING MAN</p>
        <button @click="isShow=!isShow">点击</button>
      </div>
    </template>
    
    <script>
      export default {
        data(){
          return {
            isShow: true
          }
        }
      }
    </script>
    
    <style scoped>
      .a {
        color: #70DB55;
        font-size: 36px;
      }
      .b {
        color: #EA5656;
        font-size: 36px;
      }
    </style>
    
    

    本来想视频展示的,本人手残没传上来哈!只能截图看一下喽。
    效果展示:
    在这里插入图片描述
    点击后切换效果为
    在这里插入图片描述
    其实我朋友也给我发了他的代码
    他的代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    
      <style>
        .active{
          color: red;
        }
      </style>
    </head>
    <body>
    <div id="app">
      <!--<h2 class="active">{{message}}</h2>
      <h2 :class="active">{{message}}</h2>-->
      <!--<h2 v-bind:class="{key1:value1,key2:value2}">{{message}}</h2>-->
      <!--<h2 v-bind:class="{类名1:true,类名2:boolean}">{{message}}</h2>-->
      <h2 class="title" v-bind:class="{active:isactive,line:isLine}">{{message}}</h2>
      <button v-on:click="btnClick">按钮</button>
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
    
        const app = new Vue({
            el:'#app',
            data:{
                message:'你好',
                isactive:true,
                isLine:true
            },
          methods:{
            btnClick:function () {
                this.isActive = !this.isActive;
              },
            getClasses:function () {
              return {active:this.isactive,line:this.isLine}
            }
          }
        })
    
    </script>
    </body>
    </html>
    

    效果展示:
    在这里插入图片描述
    发现有点问题,于是就改了下,修改代码解决方法
    上一篇文章
    改后效果展示:
    在这里插入图片描述
    点击按钮并没有任何效果。

    我改了下代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    
      <style>
        .active{
          color: red;
        }
      </style>
    </head>
    <body>
    <div id="app">
      <!--<h2 class="active">{{message}}</h2>
      <h2 :class="active">{{message}}</h2>-->
      <!--<h2 v-bind:class="{key1:value1,key2:value2}">{{message}}</h2>-->
      <!--<h2 v-bind:class="{类名1:true,类名2:boolean}">{{message}}</h2>-->
      <h2 class="title" v-bind:class="{active:isactive,line:isLine}">{{message}}</h2>
      <button v-on:click="btnClick">按钮</button>
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
    
        const app = new Vue({
            el:'#app',
            data:{
                message:'你好',
                isactive:true,
                isLine:true
            },
          methods:{
            btnClick:function () {
                this.isActive = !this.isActive;
              },
            getClasses:function () {
              return {active:this.isactive,line:this.isLine}
            }
          }
        })
    
    </script>
    </body>
    </html>
    

    最终效果如下:
    在这里插入图片描述
    点击后效果:
    在这里插入图片描述
    最后以上2种方案都可以。嘿嘿嘿!

    展开全文
  • 代码实例:代码描述:点击切换按钮,来改变显示的内容,切换不同的单位。...vue点击切换改变内容new Vue({el:"#example",data:{flag:true,//单位切换开关btnText:'元/吨',},methods:{showToggle:function(){thi...
  • 一、背景颜色 1.最终效果: 2.代码: 二、字体大小 1.最终效果:
  • 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="home"> <ul> <li v-for="(item, index) in tabs" :key="index" :class="cutIndex == item.state ? 'home-hover' : ''" @click="handleMap(item.state)" ...img :src="cutIndex == item....
  • <template> <div class="pageBgc" @click="changeBgc" :style="{background:...点我切换颜色</li> </ul> </div> </template> <script> export default { data() { .
  • 下面代码在html引入的vue方法都一样 代码如下 直接引用html看效果即可如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=...
  • 随机颜色 点击切换 <button @click="btn">点击</button> <div :style="{color:colorRender}" >内容</div> data(){ return{ listColor:['red','blue','yellow','pink','green'], ...
  • 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的父子组件传值实现效果,单击切换颜色会进性改变并添加下划线 父组件代码实现(Home.vue) 需要进性对子组件的导入 import TabControl from ‘@/components/content/TabControl’ <tab-control :titles...
  • 点击按钮切换div的颜色 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script> <style> #app div{ width: 200px; height: 200px; } #one{ backgro
  • 当前Vue项目需要做一个按钮切换的功能(点击A号button,背景色变化;点击B号button,A号回复原背景色,B变色) =====》 实现上述功能,最基础的方法就是,动过获取对应的dom,强制改变背景色: <div ...
  • Vue 点击文字改变文字颜色

    千次阅读 2021-11-10 13:55:43
    Vue 点击改变行颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color: blue; } </style> &...
  • <button @click="buttonClick(1)" :class="buttonIndex == 1?'bgcolor':''">月</button> <button @click="buttonClick(2)" :class="buttonIndex == 2?'bgcolor':''">季</button>...
  • vue点击切换样式

    2020-01-16 11:56:27
    Vue点击切换样式 html代码 <div class="color-name"> <span :class="activeColor == colorIndex ? 'active':''" v-for="(color,colorIndex) in SKUList.color" :key="colorIndex" @click=...
  • vue点击排序按钮之后按钮变色
  • vue实现鼠标点击改变颜色
  • <template> <div class="first-app"> <el-button-group> <el-button size="mini" @click="setAlertSeverity('')" :class="currentSeverity==''?'activeBtn':'normalBtn'">...
  • data() { return { currentSort:'', }; }, methods: { dj(index){ this.currentSort = index console.log( this.... } } 当我们触发点击事件的时候,传入循环的index ,这样我们就可以将绑定样式赋给点击到的对应内容

空空如也

空空如也

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

vue点击按钮切换颜色