• 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'

          }

        }

  • 相关阅读:
    基于Hadoop的改进Apriori算法
    iOS 访问URL转码
    第一次进入应用图片轮播效果
    购物篮模型&Apriori算法
    Ionicons的使用
    如何在 Eclipse 中使用命令行
    Eclipse输入命令行参数
    CHAR,TCHAR,WCHAR 三者的区别与转换
    函数名、变量前后的_(一个下划线)、__(两个下划线)分别有什么用
    java爬虫简单实现
  • 原文地址:https://www.cnblogs.com/yenanb/p/9866522.html
Copyright © 2020-2023  润新知