Vue ＜style＞使用变量 css使用变量

首先给标签赋值 :style

<div :style="cssVar" />

computed中定义刚才赋值的变量

 computed:{cssVar(){const _site = {'--left': 10,'--top': 20,}return _site},  },

最后在 <style> 中使用var()函数读取变量即可，该函数可以使用第二个参数，表示变量的默认值。

@keyframes scale-out-tr {0% {-webkit-transform: scale(1);transform: scale(1);-webkit-transform-origin: 100% 0%;transform-origin: 100% 0%;opacity: 1;}100% {-webkit-transform: scale(0);transform: scale(0);-webkit-transform-origin: var(--left, 10) var(--top, 20);transform-origin: var(--left, 10) var(--top, 20);opacity: 1;}
}

更多 CSS 变量教程

Vue ＜style＞使用变量 css使用变量相关推荐

html中的函数怎么显示变量,css - 原生变量及使用函数 var()
零.序言前两天在逛 blog 的时候看见一些内联样式新奇的写法时很纳闷,虽然说不上多么熟练,但是从来没见过 --color: brown 这样的写法,百度一番之后仍然没啥头绪,今天偶然看到一篇文章 ...
vue css自定义标签,Vue如何使用CSS自定义变量
目录在 css 自定义变量的功能以及出来许久了,但实际开发中大家使用并不多.归其原因是因为 less.sass 等预处理器已经拥有定义变量的功能,以及Vue.react很方便设置 style 样式, ...
vue css 应用变量_如何使用CSS Grid和CSS变量快速为应用创建原型
vue css 应用变量 CSS Grid and CSS Variables are both huge wins for front-end developers. The former make ...
vue 在style标签中引入js变量控制样式
START 如果希望元素的样式根据js代码去控制,常见的办法呢,是在元素的style属性绑定变量即可例如 <h3 :style="{ color: colorList[0] }&qu ...
css 设置变量，通过refs的style.setProperty直接设置变量的值
css 设置变量,通过refs的style.setProperty直接设置变量的值 <template><div class="ScaleBox" ref=&qu ...
css 识别变量中的换行符_跟我一起全面了解一下CSS变量
什么是css变量? CSS变量,即CSS variable.官方的名称是级联变量的CSS自定义属性,即CSS custom properties for cascading variables.类似于 ...
js 中对于 css 的变量操作（React也可）
文章目录前言一.设置CSS变量? 二.读取变量三.删除变量总结前言主要讲js 中对于 css 的变量操作: 前端框架:antd框架一.设置CSS变量? document.body.sty ...
css中变量_CSS中的变量
css中变量 CSS | 变数 (CSS | Variables) CSS variables allow you to create reusable values that can be used ...
小程序css样式变量/api promise化
小程序css样式变量全局样式变量 <style> html{//css变量,在html作用域--main-color:#0c00000 } .box1,.box2{background- ...

Vue ＜style＞使用变量 css使用变量

Vue ＜style＞使用变量 css使用变量相关推荐

最新文章

热门文章