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>
相关推荐
Baklib梅梅1 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_1 小时前
Chrome开发者工具
前端·chrome
YiHanXii1 小时前
this 输出题
前端·javascript·1024程序员节
楊无好1 小时前
React中ref
前端·react.js
维他命Coco1 小时前
js常见开发学习
javascript
程琬清君1 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪1002 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔662 小时前
flutter实现web端实现效果
前端·flutter
csj502 小时前
前端基础之《React(2)—webpack简介-使用Babel》
前端·react
!win !3 小时前
分享二个实用正则
javascript·正则表达式