CSS使用JS变量

1. CSS变量

CSS 变量(也称为自定义属性)允许我们在 CSS 中定义可重复使用的值,并将其应用于不同的选择器。为了创建一个 CSS 变量,我们需要使用 -- 前缀,然后可以像常规属性一样使用它。

css 复制代码
:root {
  --primary-color: blue;
}

h1 {
  color: var(--primary-color);
}
2. 如何在Vue2中使用
template
html 复制代码
    <div class="lines"  :style="{'--row':row}" >
      {{ content }}
    </div>
scss
css 复制代码
.lines {
  -webkit-line-clamp: var(--row);
  -webkit-box-orient: vertical;
}
JS
javascript 复制代码
data() {
    return {
        row : 1
  }
},
3. 如何在Vue3中使用

在 Vue3 中,提供了一种新的快捷使用方法:v-bind()

javascript 复制代码
<script setup>
const myStyle= {
  color: '#999'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('myStyle.color');
}
</style>
相关推荐
发愤图强的羔羊2 分钟前
Chartdb 解析数据库 DDL:从 SQL 脚本到可视化数据模型的实现之道
前端
摸着石头过河的石头6 分钟前
控制反转 (IoC) 是什么?用代码例子轻松理解
前端·javascript·设计模式
携欢42 分钟前
PortSwigger靶场之Stored XSS into HTML context with nothing encoded通关秘籍
前端·xss
和雍1 小时前
webpack5 创建一个 模块需要几步?
javascript·面试·webpack
百锦再1 小时前
每天两小时学习three.js
开发语言·javascript·学习·3d·three·2d·gbl
小桥风满袖1 小时前
极简三分钟ES6 - const声明
前端·javascript
小小前端记录日常1 小时前
vue3 excelExport 导出封装
前端
南北是北北1 小时前
Flow 的 emit 与 tryEmit :它们出现在哪些类型、背压/缓存语义、何时用谁、常见坑
前端·面试
flyliu1 小时前
继承,继承,继承,哪里有家产可以继承
前端·javascript
司宸1 小时前
Cursor 编辑器高效使用与配置全指南
前端