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

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

方式一 style属性绑定

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

方式二 style对象绑定

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

<style>
.header{
    color:var(--color)
}
style>
1
2
3
4
5
6
7

方式三 自定义style元素组件

<template>
    <div class="header">
        Header
        
        <component is="style">
            .{{className}}{
                color: {{ color }};
            }
        component>
    div>
template>
<script> 
export default {
    name: "Header",
    data() {
        return {
            className:"header",
            color: "red",
        };
    },
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

<template>
    <div class="header">
        Header
        <v-style>
            .{{className}}{
                color: {{ color }};
            }
        v-style>
    div>
template>
<script> 
// 等同上面的 
import Vue from 'vue';
// 增加自定义组件,指定元素内容为style
Vue.component('v-style', {
  render: function (createElement) {
    return createElement('style', this.$slots.default)
  }
});
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

方式四 原生全局变量

<style>
:root{
  --header-color:red;
}
.header{
  color:var(--header-color)
}
style>
1
2
3
4
5
6
7
8

方式五 原生局部变量

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