Vue 样式绑定

草木物语 / 2023-08-16 / 原文

绑定 HTML class

:class (v-bind:class 的缩写)

:class 指令也可以和一般的 class attribute 共存

绑定的对象并不一定需要写成内联字面量的形式，也可以直接绑定一个对象

可以给 :class 绑定一个数组来渲染多个 CSS class

绑定内联样式

:style 支持绑定 JavaScript 对象值，对应的是 HTML 元素的 style 属性

尽管推荐使用 camelCase，但 :style 也支持 kebab-cased 形式的 CSS 属性 key (对应其 CSS 中的实际名称)

可以给 :style 绑定一个包含多个样式对象的数组

<template>
  <span>
    <span class="redColor fSize bgColor"> Hello World </span><br />
    <span :class="{ redColor: true, fSize: true, bgColor: true }"> Hello World </span><br />
    <span :class="{ redColor: isTrue, fSize: isTrue, bgColor: isTrue }"> Hello World </span><br />
    <span :class="[ 'redColor', 'fSize', 'bgColor' ]"> Hello World </span><br />

    <span :style="{ color: 'red', fontSize: '20px', 'font-size':'22px' }"> Hello World </span><br />
    <span :style="[ redColor, fSize]"> Hello World </span><br />

    <span :class="{redColor: isActive===0}" @click="f1(0)">首页</span>
    <span :class="{redColor: isActive===1}" @click="f1(1)">关于我们</span>
    <span :class="{redColor: isActive===2}" @click="f1(2) ">公司产品</span>

  </span>
</template>

<script>
  export default {
    data() {
      return {
        isTrue: true,
        redColor: {
          color: 'red'
        },
        fSize: {
          fontSize: '20px'
        },
        isActive: 1
      }
    },
    methods: {
      f1(i) {
        console.log(i)
        this.isActive = i
      }
    }
  }
</script>

<style>
  .redColor {
    color: red
  }

  .fSize {
    font-size: 20px;
  }

  .bgColor {
    background: #666;
  }
</style>

官方文档: Class 与 Style 绑定 https://cn.vuejs.org/guide/essentials/class-and-style.html#binding-inline-styles