快捷導(dǎo)航

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

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

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

寫在前面：

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

實(shí)際使用：

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

<div class="div">
  <div class="span">
    <div class="span_title">
      這是測(cè)試文字
    </div>
  </div>
</div>

在css中：

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

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

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

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

// 對(duì)象調(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 {
  /* 對(duì)象調(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>

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

直接使用：完全沒(méi)有問(wèn)題

拼接使用：這個(gè)在css中沒(méi)有問(wèn)題，不過(guò)在scss中會(huì)出現(xiàn)錯(cuò)誤，這個(gè)在下面的scss中會(huì)有詳細(xì)介紹

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

組合使用：完全沒(méi)問(wèn)題

在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');

    /* 對(duì)象調(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>

直接使用：沒(méi)有問(wèn)題

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

對(duì)象調(diào)用：沒(méi)問(wèn)題

組合使用：沒(méi)問(wèn)題

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

問(wèn)題：

在拼接使用有幾種方式：

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

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

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

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

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

問(wèn)題分析（嘗試解決）：

【這部分會(huì)很長(zhǎng)，如果不想看，可以直接跳到解決方法】

首先是第一種，如果使用的話會(huì)直接報(bào)錯(cuò)，報(bào)錯(cuò)內(nèi)容為：

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

第二種和第三種錯(cuò)誤一樣：

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

這里進(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é)果也非常讓不出意外的都不行，并且在第二種方式也是直接報(bào)錯(cuò)的，在尋找問(wèn)題的過(guò)程中，發(fā)現(xiàn)了更加amazing的事情：

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

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

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

解決方式（思路）：

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

完整代碼：

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

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

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

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

樣式的使用：

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

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

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

我用的工具是webstormless也是唯一一個(gè)沒(méi)有報(bào)錯(cuò)的提示的（工具內(nèi)的報(bào)錯(cuò)提示，可能不認(rèn)識(shí)新內(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');

    /* 對(duì)象調(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相對(duì)less一些方法更加靈活，在v-bind()的使用中，拼接使用會(huì)出現(xiàn)錯(cuò)誤，這個(gè)暫時(shí)按下不表，在原理中會(huì)詳細(xì)闡述