• vue Class与style绑定


      数据绑定一个常见需求是操作元素的class列表和它的内联样式。因为他们都是属性,我们可以用v-bind来处理它们:只需要计算出表达式最终的字符串。不过字符串拼接麻烦又易错。因此,在v-bind用于class与style时,vue.js专门增强了它。表达式的结果类型除了字符串外,还可以是对象或数组。

    1.绑定HTML Class

      对象语法

      我们可以传给v-bind:class一个对象,以动态的切换class.

      我们也可以在对象中传入更多属性用来动态切换多个class。此外v-bind:class指令可以与普通的class属性共存。

    2.绑定内联样式

      对象语法

    v-bind:style的对象语法十分直观--看着非常像css。其实它是一个javascript对象。css属性名可以用驼峰式(camelCase)或(配合引号的)短横分割命名(kebab-case);

      数组语法

    v-bind:style的数组语法可以将多个样式对象应用到一个元素上。

      自动添加前缀

    当v-bind:style使用需要特定前缀的css属性时,如transform,vue.js会自动侦测并添加相应的前缀。

  • 相关阅读:
    CentOS8下安装mysql8
    Git使用
    《操作系统导论》读书笔记
    《Linux命令行大全》读书笔记
    Centos8 开机后显示 Activate the web console with: systemctl enable --now cockpit.socke
    numpy学习笔记
    CentOS8使用阿里源
    Python 面向对象
    matplotlib解决不显示中文问题
    MySQL基础第三课
  • 原文地址:https://www.cnblogs.com/susanws/p/7358382.html
Copyright © 2020-2023  润新知