VUE点击按钮切换字体颜色

最新推荐文章于 2024-03-01 19:44:09 发布

兜兜风~

最新推荐文章于 2024-03-01 19:44:09 发布

阅读量8.6k

点赞数 6

分类专栏： VUE

本文链接：https://blog.csdn.net/FannyIf123/article/details/107381418

版权

VUE 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前几天我朋友在学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种方案都可以。嘿嘿嘿！

兜兜风~

关注

6
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
VUE点击按钮切换字体颜色

前几天我朋友在学vue,在写一个关于点击按钮切换字体颜色的demo,我于是就看了一下，按照我的想法我是这么写的代码如下：<template> <div> <p :class="{a: !isShow,b: isShow}">RUNNING MAN</p> <button @click="isShow=!isShow">点击</button> </div></template>&
复制链接

扫一扫