上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

[油猴脚本开发指南]CSS属性绑定

[复制链接]
  • TA的每日心情
    开心
    2 小时前
  • 签到天数: 57 天

    [LV.5]常住居民I

    354

    主题

    3128

    帖子

    3129

    积分

    管理员

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3129

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯管理员

    发表于 2022-2-24 01:18:45 | 显示全部楼层 | 阅读模式

    前文

    在传统网页开发中,我们可以使用class和style

    但是在vue中,我们不仅可以使用class和style

    更可以通过bing函数,也就是:来动态设置class和style

    这里有多种写法,我们可以浅尝截止一下

    对象语法

    <div :class="{ active: isActive }"></div>
    

    这里isActive变量的真假来控制active的class名的存在与不存在

    :class与class可以共存

    <div
      class="static"
      :class="{ active: isActive, 'text-danger': hasError }"
    ></div>
    

    期期中isActive以及hasError控制类名的存在与不存在

    假设isActive为真,而hasError为假

    则渲染的结果为

    <div class="static active"></div>
    

    当数据的变化发生改变,则会相应的进行动态更新

    我们也可以:bind上一个对象,对象包含上述的内容

    <div :class="classObject"></div>
    
    data() {
      return {
        classObject: {
          active: true,
          'text-danger': false
        }
      }
    }
    

    同理,只要符合数据格式的响应式对象即可,我们也可以绑定一个计算属性

    <div :class="classObject"></div>
    
    data() {
      return {
        isActive: true,
        error: null
      }
    },
    computed: {
      classObject() {
        return {
          active: this.isActive && !this.error,
          'text-danger': this.error && this.error.type === 'fatal'
        }
      }
    }
    

    数组语法

    我们除了给:class绑定一个对象,也可以绑定一个数组,如

    <div :class="[activeClass, errorClass]"></div>
    
    data() {
      return {
        activeClass: 'active',
        errorClass: 'text-danger'
      }
    }
    

    则绑定的结果为

    <div class="active text-danger"></div>
    

    我们也可以在数组中使用三元表达式,来动态的计算数组中返回的数据变量或字符串

    <div :class="[isActive ? activeClass : '', errorClass]"></div>

    该表达式errorClass始终存在,而activeClass根据isActive的值来判断

    我们也可以在数组中使用对象语法,但是这种我们通常不会使用

    <div :class="[{ active: isActive }, errorClass]"></div>
    

    在组件上使用

    假如我们声明了一个组件

    const app = Vue.createApp({})
    
    app.component('my-component', {
      template: `<p class="foo bar">Hi!</p>`
    })
    

    同时在调用该组件的父组件添加了一个动态的class

    <div id="app">
      <my-component class="baz boo"></my-component>
    </div>
    

    则组件的class与组件自身的class会融合在一起

    在Vue3中,可以声明多个根节点,当存在多个根节点的时候,使用$attrs属性来进行融合父组件设置的class

    <div id="app">
      <my-component class="baz"></my-component>
    </div>
    
    const app = Vue.createApp({})
    
    app.component('my-component', {
      template: `
        <p :class="$attrs.class">Hi!</p>
        <span>This is a child component</span>
      `
    })
    

    总结

    我们可以对动态class设置一个对象,或一个数组

    如果是对象,类名在前,真假在后,如果是数组,则可以使用三元表达式

    数组和对象可以结合

    内联样式

    CSS属性名可以使用驼峰式,如camelCase或短横线分割kebab-case,style动态跟动态class的用法基本一致

    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
    
    data() {
      return {
        activeColor: 'red',
        fontSize: 30
      }
    }
    

    我们也可以直接绑定一个样式对象

    <div :style="styleObject"></div>
    
    data() {
      return {
        styleObject: {
          color: 'red',
          fontSize: '13px'
        }
      }
    }
    

    同理也可以使用计算属性

    数组语法

    同理,我们也可以设置多个样式对象到同一个数组上

    <div :style="[baseStyles, overridingStyles]"></div>

    自动添加前缀

    css具有很多实验性的特性,浏览器厂商为了兼容这些特性,同时不与其他浏览器冲突

    所以经常会添加一个特殊的前缀

    如transition,有-moz-,-ms-,-webkit-,等等

    一开始一个厂商会具有一个前缀,而后来为了抢占市场分量,开始互相兼容对象前缀

    如果我们正常写css代码,我们需要自己写前缀

    也可以使用scss编译,自动添加前缀

    而在vue中

    vue将会自动侦测并且添加响应的前缀,vue会在运行时检测哪些样式的属性是被浏览器所支持的

    如果不支持某个属性,会通过多次尝试来找到支持他的前缀

    (这里个人并没有特别理解,大概翻了一下源码也没翻到)

    感觉不像是autoprefix,而是根据js代码检测特定前缀来进行处理的?

    多重值

    可以在style绑定的过程中,为属性提供一个包含多个值的数组,提供多个带前缀的值,例如

    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

    这样只会渲染数组中最后一个被浏览器支持的值。

    结语

    我们只需要记住绑定动态class以及style的时候可以是数组形式,也可以是对象形式,会自动添加前缀

    需要的时候查什么即可。

    撒花~

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    开心
    2022-3-7 09:47
  • 签到天数: 1 天

    [LV.1]初来乍到

    22

    主题

    126

    帖子

    161

    积分

    中级工程师

    Rank: 5Rank: 5

    积分
    161
    发表于 2022-2-24 09:03:23 | 显示全部楼层
    哥哥牛逼
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    昨天 02:52
  • 签到天数: 69 天

    [LV.6]常住居民II

    153

    主题

    2029

    帖子

    2157

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    2157

    猫咪币纪念章热心会员活跃会员突出贡献三好学生中秋纪念章国庆纪念章管理员家财万贯

    发表于 2022-2-24 10:01:00 | 显示全部楼层
    哥哥这些markdown都有整理么?
    论坛的观感好差。。。
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2 小时前
  • 签到天数: 57 天

    [LV.5]常住居民I

    354

    主题

    3128

    帖子

    3129

    积分

    管理员

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3129

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯管理员

    发表于 2022-2-24 10:53:58 | 显示全部楼层
    王一之 发表于 2022-2-24 10:01
    哥哥这些markdown都有整理么?
    论坛的观感好差。。。

    还没....最近在研究vue3+ts舒服一点的写法...
    我晚上就开始整理
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表