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>
相关推荐
木叶丸6 分钟前
编程开发中,那些你必须掌握的基本概念
前端·数据结构·编程语言
前端进阶者7 分钟前
js通知提醒
前端·javascript
拖孩13 分钟前
微信群太多,管理麻烦?那试试接入AI助手吧~
前端·后端·微信
快起来别睡了20 分钟前
看完你就知道JavaScript 中的对象创建与继承方式原来这么简单?!
javascript
乌兰麦朵29 分钟前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Goodbaibaibai30 分钟前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript
Code季风30 分钟前
Gin Web 层集成 Viper 配置文件和 Zap 日志文件指南(下)
前端·微服务·架构·go·gin
蓝倾30 分钟前
如何使用API接口实现淘宝商品上下架监控?
前端·后端·api
舂春儿32 分钟前
如何快速统计项目代码行数
前端·后端
毛茸茸32 分钟前
⚡ 从浏览器到编辑器只需1秒,这个React定位工具改变了我的开发方式
前端