【Vue】关于CSS样式绑定整理

因突发奇想设计一款组件,需要根据属性动态绑定样式,故而整理一些Vue的动态绑定样式方法(传参绑定类似,不做过多叙述),仅供参考.

b5f4fcd5-4203-4346-b2ee-e071dcf61d6c

1. 方式一: 直接在元素上绑定具体样式
2. 方式二: 定义属性对象,绑定到style,可以在style中使用定义的变量
3. 方式二: 通过引入自定义组件引入style数据,直接绑定样式
4. 方式四: css原生定义:root全局变量
5. 方式五: css原生局部变量,仅可以在选择器内部定义
   1. 生页面局部变量element不行哟
   2. 个人感觉除非是多个样式或嵌套子元素需要使用局部变量

以下内容是简单demo,需要做样式动态绑定:

<template>
    <div class="header">
        Header
    </div>
</template>
<script>
export default {
    name: "Header",
    data() {
        return {
            className:"header"
            color: "red",
            changeColor:"#ff0000",
            testStyle:{
                "--color":'yellow'
            }
        };
    },
};
</script>

方式一 style属性绑定

  <div class="header" :style="'color:'+ color"></div>

方式二 style对象绑定

<div class="header" :style="testStyle"></div>

<style>
.header{
    color:var(--color)
}
</style>

方式三 自定义style元素组件

<template>
    <div class="header">
        Header
        <!-- // 增加自定义组件,指定元素内容为style -->
        <component is="style">
            .{{className}}{
                color: {{ color }};
            }
        </component>
    </div>
</template>
<script> 
export default {
    name: "Header",
    data() {
        return {
            className:"header",
            color: "red",
        };
    },
};
</script>

或者可以通过Vue.component方式自定义组件,如:

<template>
    <div class="header">
        Header
        <v-style>
            .{{className}}{
                color: {{ color }};
            }
        </v-style>
    </div>
</template>
<script> 
// 等同上面的 <component is="style"></component>
import Vue from 'vue';
// 增加自定义组件,指定元素内容为style
Vue.component('v-style', {
  render: function (createElement) {
    return createElement('style', this.$slots.default)
  }
});
</script>

方式四 原生全局变量

<style>
:root{
  --header-color:red;
}
.header{
  color:var(--header-color)
}
</style>

方式五 原生局部变量

<style>
/* 注意:当前页面的element局部变量无效 */
/* element{ 
  --header-color:red; 
} */
.header{
  --size:5px; /* 个人感觉意义不大 */
  width:var(--size * 5);
  font-size:var(--size);
}
</style>