VUE点击按钮切换字体颜色

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

兜兜风~

8990人浏览 · 2020-07-16 16:47:50

兜兜风~ · 2020-07-16 16:47:50 发布

前几天我朋友在学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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^