分享一個一分鐘就學會的vue小技巧（真的一看就會～～）

1、內容簡介

在使用vue開發時，常常會封裝不少的組件方便複用，那麼不免就有寫樣式相關組件，好比須要使用時傳入顏色、高度等樣式參數。那麼問題來了：咱們要怎麼在樣式中使用組件中接收的參數呢？或者說，咱們要怎麼在樣式中使用data中的變量呢？

2、代碼演示

這個用法真的簡單，沒什麼其餘的知識點，直接上代碼：

<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()獲取咱們在行內設置的數據便可。

3、最後

之後，在封裝一些須要動態傳入樣式參數的ui組件是否是簡便了很多。你學會了麼？趕快在項目中嘗試一下吧～～