vue利用 v-bind 实现 点击变色 切换 样式

切换样式应该是v-bind很常用的功能了.简单写一个切换样式的案例.供初学者参考吧.代码如下:

 <p :class="{red: !isshow,blue: isshow}" @click="isshow=!isshow">我爱云虹</p>

export default {
  data() {
    return {
        isshow: true
            }
        }
    };

<style lang="less" scoped>
     .red {
        color: red;
        font-size: 14px;
    }
    .blue {
        color: blue;
        font-size: 20px;
    }
</style>

   效果如图:     

 点击后切换:

处于对初学者友好,稍微解释下代码.v-bind(:语法糖),有三种方式可以绑定类.分别是字符串,数组,对象.我上面用的对象.一般你只绑定一个样式用字符串就可以.一对多的时候就需要用到对象了.对象里的K就是类名了.V就是布尔值.  这样就实现了两个类的切换.如上图就实现了蓝色  红色  字号的切换.需要注意的是  对象内的其中一个布尔值需要设置"!".如果不设置.实现不了点击切换的效果.第二个类会把第一个覆盖.