• Class 与 Style 绑定


    一、绑定HTML与Class

      数组语法:

        html部分:

        <p :class="[{acitve:isActive,blue:isBlue},errorClass]">{{message}}</p> 注:这是官方文档提出来的写法。

        <p :class="[classObject,errorClass]">{{message}}</p>  注:这是官方文档没有直接提出的写法,实际上验证也是可以的,这主要来自于‘绑定内联样式’中数组语法的启示,具体如二(绑定内联样式)。也可能官方已经告诉大家了,只是博主大大人老了,眼神不太好使,没看到罢了。

        js部分:

        此处省略声明vue;

        data:{

          message:'Hello World!',

          isActive:true,

          isBlue:false,

          classObject:{

            active:true,

            blue:false

          }

        }

    二、绑定内联样式

      数组语法:

        html部分:

        <p :style="[baseStyles,overridingStyles]">{{message}}</p>

        js部分:

        data:{

          message:'Hello World!',

          baseStyles:{

            color:'red',

            fontSize:'25px'

          },

          overridingStyles:{

            color:'blue',

            backgroundColor:'yellow'

          }

        }

  • 相关阅读:
    mac 终端 常用命令
    创办支持多种屏幕尺寸的Android应用
    java学习之部分笔记2
    java学习之部分笔记
    java学习之i/o
    java中String的用法
    java中List的用法
    java学习之Date的使用
    java学习之数据库
    C#中通过类来继承两个接口,父类实例化接口中的方法,子类继承父类,调用方法
  • 原文地址:https://www.cnblogs.com/yenanb/p/9866522.html
Copyright © 2020-2023  润新知