小白学习 Vue 3.绑定 Class 与 Style__Vue.js
发布于 1 个月前 作者 banyungong 197 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

贡献主题:https://github.com/xitu/juejin-markdown-themes

theme: condensed-night-purple highlight:

小白学习 Vue 系列目录

Class

  • 对象语法

    渲染:

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

    数据:

    data: {
      isActive: true,
      hasError: false
    }
    

    结果:

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

总结:对象内部的键值对,键代表 className,而值代表该 className 是否启用。 此外,表达式中的对象也可以放在 data 或者 computed 中。

  • 数组语法

    渲染:

    <div v-bind:class="[activeClass, errorClass]"></div>
    

    数据:

    data: {
      activeClass: 'active',
      errorClass: 'text-danger'
    }
    

    结果:

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

总结:数组内部的元素,就是每一个 className,也可以在该数组内部定义三元表达式来决定是否启用。 此外,如果是自定义组件内部和外部都有 className,这些 className 不会被覆盖而会共存。

Style

对象语法:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="styleObject"></div>

数组语法:

<div v-bind:style="[baseStyles, overridingStyles]"></div>
```<p style="line-height: 20px; color: #ccc">
        版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
        作者: 妖主大人
        原文链接:<a href='https://juejin.im/post/6924120069702156301'>https://juejin.im/post/6924120069702156301</a>
      </p>
回到顶部