一个 1 分钟就学会的 vue 小技巧(真的一看就会)

前端瓶子君

共 1418字,需浏览 3分钟

 ·

2021-03-01 01:41

一、内容简介

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

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

二、代码演示

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

<template>
  <div class="box" :style="styleVar">
  </div>

</template>
<script>
export default {
  props: {
    height: {
      type: Number,
      default: 54,
    },
  },
  computed: {
    styleVar() {
      return {
        '--box-height': this.height + 'px'
      }
    }
  },
}
</
script>
<style scoped>
.box {
  heightvar(--box-height);
}
</style>

这样我们就在vue中实现了在样式里使用js变量的方法:
及通过css定义变量的方式,将变量在行内注入,然后在
style中使用var()获取我们在行内设置的数据即可。

三、最后

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

源自:https://juejin.cn/post/6911662617178144776

声明:文章著作权归作者所有,如有侵权,请联系小编删除。

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
欢迎关注「前端瓶子君」,回复「算法」,加入前端算法源码编程群,每日一刷(工作日),每题瓶子君都会很认真的解答哟
回复「交流」,吹吹水、聊聊技术、吐吐槽!
回复「阅读」,每日刷刷高质量好文!
如果这篇文章对你有帮助,在看」是最大的支持
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持
浏览 17
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报