一个 1 分钟就学会的 vue 小技巧（真的一看就会）

一、内容简介

专注于为中小企业提供成都网站设计、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业鹤岗免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

在使用vue开发时，经常会封装很多的组件方便复用，那么难免就有写样式相关组件，比如需要使用时传入颜色、高度等样式参数。

那么问题来了：我们要怎么在样式中使用组件中接收的参数呢?或者说，我们要怎么在样式中使用data中的变量呢?

二、代码演示

这个用法真的简单，没什么其他的知识点，直接上代码：

 
 
 
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
.box { 
  
  
  
  
  height: var(--box-height); 
  
  
  
  
} 
  
  
  
  
 
 
 
 

这样我们就在vue中实现了在样式里使用js变量的方法：

及通过css定义变量的方式，将变量在行内注入，然后在style中使用var()获取我们在行内设置的数据即可。

三、最后

以后，在封装一些需要动态传入样式参数的ui组件是不是简便了不少。你学会了么?赶快在项目中尝试一下吧～～

当前标题：一个 1 分钟就学会的 vue 小技巧（真的一看就会）
转载来源：http://www.stwzsj.com/qtweb/news4/11904.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联