当前位置：首页 > news >正文

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

news 2025/7/18 10:01:12

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

方式一: 直接在元素上绑定具体样式
方式二: 定义属性对象,绑定到style,可以在style中使用定义的变量
方式二: 通过引入自定义组件引入style数据,直接绑定样式
方式四: css原生定义:root全局变量
方式五: 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>