【实战】vue中css3的var()插入变量函数与JS变量结合实现动态CSS样式-HTML/CSS- WEB程序开发笔记

【实战】vue中css3的var()插入变量函数与JS变量结合实现动态CSS样式

原创
作者：phpEcho
发布时间：2024-06-21 08:18
标签： CSS CSS3 Vue
浏览量：308

本文以一个简单代码实战来学习一下CSS3中变量的使用，以及var()函数的应用。同时，结合JS代码实现了动态设置CSS的变量，更接近平时实际的代码开发。

# 先了解一下 css3 的 var() 函数

var() 函数用于插入 CSS 变量的值。

var() 函数的语法:
```
var(name, value)
```
name：必需。变量名（必须以两个破折号（--）开头，且区分大小写）。
value：可选。回退值（在未找到变量时使用）。

示例代码片段：
```
/* 定义变量 */
body{
  --fontSize: 18px;
  --color: #000000;
}

/* 使用变量 */
div-name{
  font-size : var(--fontSize);
  color: var(--color);
}
```

# 最终要实现效果
![](https://cnd.51blog.xyz/images/2024/css3-var-vue-js-dynamic.png)

# vue2 实现版本
```
<template>
  <div style="display: flex; justify-content: center;">
    <span v-for="item in list" :style="{'--text': item.text, '--color': item.color}"></span>
  </div>
</template>

# uni-app (vue3)实现版本
```
<template>
	<view style="display: flex; justify-content: center;">
		<view v-for="(item, index) in list" :style="{'--text': item.text, '--color': item.color}" :key="index"
			class="text-item">
		</view>
	</view>
</template>

WEB程序开发笔记

【实战】vue中css3的var()插入变量函数与JS变量结合实现动态CSS样式

文章归档

推荐文章

热门标签

友情链接