一分钟就能学会的vue小技巧 vue实用技巧

bigegpt 2024-10-17 08:06 7 浏览

喜欢的小伙伴动动小手，点点关注。私信发送“进阶”，获取更多Java进阶、架构的干货资料（《Spring Cloud微服务实战》《Spring源码深度解析》《深入理解Apache Dubbo与实战》《一线架构师实践指南》《25大专题Java面试题手册》《Java面经》……）。

一、内容简介

在使用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 {
  height: var(--box-height);
}
</style>
复制代码

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

三、最后

以后，再封装一些需要动态传入样式参数的ui组件是不是简便了不少。

作者：liangyue
链接：https://juejin.cn/post/6911662617178144776
来源：掘金

vue获取元素高度

上一篇：使用Vue Query进行高级数据获取 vue3获取数据
下一篇：Vue.js v3.0 教程-模板语法 vue.js使用教程

一分钟就能学会的vue小技巧 vue实用技巧

一、内容简介

二、代码演示

三、最后

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

Docker 命令大全（docker命令大全记录表）

替代Docker build的Buildah简单介绍

Docker Desktop安装使用指南:零基础教程

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解