快捷導(dǎo)航

Vue3新屬性之css中使用v-bind的方法（v-bind?in?css）

更新時間：2023年01月29日 15:28:44 作者：ciarlatani

這篇文章主要介紹了Vue3新屬性css中使用v-bind（v-bind?in?css）的方法，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

寫在前面：

本文主要介紹Vue3中的新增的v-bind()的常用使用方式，主要包括在css,less,scss中的使用，可以參考官方文檔查看：Vue3官方文檔，本文將主要通過一個demo中的使用來展示

實(shí)際使用：

先創(chuàng)建一個通過的頁面結(jié)構(gòu)，因?yàn)槭墙Y(jié)構(gòu)是通用內(nèi)容，所以這里在直接進(jìn)行簡單的定義

<div class="div">
  <div class="span">
    <div class="span_title">
      這是測試文字
    </div>
  </div>
</div>

在css中：

在css中主要通過直接進(jìn)行綁定，主要包括幾種使用方式（我自己編的名詞）：直接使用、拼接使用、對象調(diào)用、組合使用【這是我想到的幾種常見方式，如果有特殊需求，可以評論區(qū)溝通】

在JS中先對需要用的數(shù)據(jù)進(jìn)行定義：

// 進(jìn)行拼接調(diào)用測試的數(shù)據(jù)
let width = 400

// 直接調(diào)用的數(shù)據(jù)
let div_height = '400px'
let div_color = '#e89393'

// 對象調(diào)用的數(shù)據(jù)
let span = {
  width: '200px',
  height: '200px',
  color: 'green',
}

// 組合調(diào)用的數(shù)據(jù)
let transition = 'cubic-bezier(0, 1.5, .6, 1)'

然后這些數(shù)據(jù)直接在css中進(jìn)行使用，使用v-bind()進(jìn)行綁定

<style scoped lang="css">
.div {
  /* 拼接使用 */
  width: v-bind(width + 'px');
  /* 直接使用 */
  height: v-bind(div_height);
  background: v-bind(div_color);
}

.span {
  /* 對象調(diào)用 */
  width: v-bind('span.width');
  height: v-bind('span.height');
  background: v-bind('span.color');
  display: flex;
  justify-content: center;
  align-items: center;
}

.span_title {
  width: 100px;
  height: 100px;
  background: #000;
  color: white;
  /* 組合使用 */
  transition: all .9s v-bind(transition);
}

.span:hover .span_title {
  border-radius: 50%;
  background: #a5f5b8;
  color: #ff0000;
}
</style>

在對應(yīng)的四個方式的調(diào)用中：

直接使用：完全沒有問題

拼接使用：這個在css中沒有問題，不過在scss中會出現(xiàn)錯誤，這個在下面的scss中會有詳細(xì)介紹

對象調(diào)用：對象的調(diào)用和直接使用類似，不過不同的是，需要使用引號的包裹才能正常使用，如果直接書寫會報錯

組合使用：完全沒問題

在less中：

使用的數(shù)據(jù)同樣是上面給出的數(shù)據(jù)，這里直接改樣式的內(nèi)容了

<style scoped lang="less">
// 使用變量承接
@height: v-bind(div_height);

.div {
  width: 400px;
  /* 直接使用 */
  height: @height;
  background: v-bind(div_color);

  .span {
    @width: v-bind('span.width');

    /* 對象調(diào)用 */
    width: @width;
    height: v-bind('span.height');
    background: v-bind('span.color');
    display: flex;
    justify-content: center;
    align-items: center;

    .span_title {
      @transition: v-bind(transition);
      width: 100px;
      height: 100px;
      background: #000;
      color: white;
      /* 組合使用 */
      transition: all .9s @transition;
    }

    &:hover .span_title {
      border-radius: 50%;
      background: #a5f5b8;
      color: #ff0000;
    }
  }
}
</style>

直接使用：沒有問題

拼接使用：存在問題，在下面嘗試進(jìn)行了解決

對象調(diào)用：沒問題

組合使用：沒問題

這里感謝熊本熊的飼養(yǎng)員提出的問題，在重新的測試中的確在拼接使用會有問題存在

問題：

在拼接使用有幾種方式：

// 定義使用的數(shù)據(jù)
let width = 400

// 直接拼接
@width: v-bind( width + 'px');
width: @width;

// 拿到內(nèi)容后拼接
@width: v-bind(width) + 'px';
width: @width;

// 使用時拼接
@width: v-bind(width);
width: @width + 'px';

常用的拼接方法一般為這幾種（如果有欠缺還請補(bǔ)充），這幾種方式都進(jìn)行了嘗試，其中第二種第三種會沒有效果，第一種會直接報錯

問題分析（嘗試解決）：

【這部分會很長，如果不想看，可以直接跳到解決方法】

首先是第一種，如果使用的話會直接報錯，報錯內(nèi)容為：

因?yàn)?code>less的直接報錯，導(dǎo)致定義的變量壓根就沒有被編譯出來，從而報錯

第二種和第三種錯誤一樣：

在這種使用方式中，變量可以正確承接，但是不能完成拼接的操作，導(dǎo)致只有變量而沒有單位，并且可以看出最終都被翻譯為var(--變量名)來執(zhí)行，所以順便也對var()進(jìn)行了拼接測試

這里進(jìn)行調(diào)用內(nèi)容的定義，并且模仿編譯后的內(nèi)容，進(jìn)行使用，在這種情況下嘗試使用拼接

嘗試的拼接方式：

直接拼接：

:root{
  --test:400 + 'px';
}
/* 使用 */
width: var(--test);

接受變量后拼接：

:root{
  --test:400 + 'px';
}
/* 使用 */
width: var(--test+ 'px');

繼承后拼接：

:root{
  --test:400 + 'px';
}
/* 使用 */
width: var(--test) + 'px';

結(jié)果也非常讓不出意外的都不行，并且在第二種方式也是直接報錯的，在尋找問題的過程中，發(fā)現(xiàn)了更加amazing的事情：

這個變量壓根就沒定義，或者說沒被識別到，所以重新模仿Vue直接定義行內(nèi)樣式，并且使用拼接嘗試：

這種直接的拼接方式直接將所有內(nèi)容都進(jìn)行了拼接，再換一種思路：使用V-bind這個V-bind指的是數(shù)據(jù)的而不是樣式：

這次問題得到了解決，并且樣式數(shù)據(jù)也是響應(yīng)式的單個數(shù)據(jù)，并且也是在less中正確使用，應(yīng)該也算解決問題吧

解決方式（思路）：

將變量的內(nèi)容在行內(nèi)樣式使用拼接的方式進(jìn)行定義，然后在定義的less或scss中進(jìn)行使用，因?yàn)槎x的樣式是行內(nèi)樣式，所以優(yōu)先級和變量出現(xiàn)的位置，都是在使用之前，所以可以正常使用

完整代碼：

使用數(shù)據(jù)的定義：

// 大部分?jǐn)?shù)據(jù)和預(yù)先提供的數(shù)據(jù)一樣（這里只寫了新增數(shù)據(jù)）
let test = 400

頁面結(jié)構(gòu)：

<!--	改變的內(nèi)容為下面這行（其他內(nèi)容和原來內(nèi)容保持一致）-->
<!--	【在這里對要使用的數(shù)據(jù)進(jìn)行單位的綁定】-->
<div class="div" :style="{'--test' :test + 'px'}">
 <div class="span">
   <div class="span_title">
     這是測試文字
   </div>
 </div>
</div>

樣式的使用：

<style scoped lang="less">
// 承接使用
@width: var(--test);

.div {
/* 使用 */
width: @width;
/* 或者直接使用 */
width: var(--test);
height: 400px;
background: red;
}
</style>

在css的測試中幾種方式也都能完美運(yùn)行，并且在less的特有的數(shù)據(jù)綁定中也都沒有問題，對于拼接使用是可以正常使用的。

我用的工具是webstormless也是唯一一個沒有報錯的提示的（工具內(nèi)的報錯提示，可能不認(rèn)識新內(nèi)容把）

在scss中：

<style scoped lang="scss">
// 使用變量承接
$width: v-bind(width + 'px');
$height: v-bind(div_height);

.div {
  /* 拼接使用 */
  width: $width;
  /* 直接使用 */
  height: $height;
  background: v-bind(div_color);

  .span {
    $width: v-bind('span.width');

    /* 對象調(diào)用 */
    width: $width;
    height: v-bind('span.height');
    background: v-bind('span.color');
    display: flex;
    justify-content: center;
    align-items: center;

    .span_title {
      $transition: v-bind(transition);
      width: 100px;
      height: 100px;
      background: #000;
      color: white;
      /* 組合使用 */
      transition: all .9s $transition;
    }

    &:hover .span_title {
      border-radius: 50%;
      background: #a5f5b8;
      color: #ff0000;
    }
  }
}
</style>

scss相對less一些方法更加靈活，在v-bind()的使用中，拼接使用會出現(xiàn)錯誤，這個暫時按下不表，在原理中會詳細(xì)闡述