Vue中怎么綁定內(nèi)聯(lián)樣式

發(fā)布時(shí)間：2021-06-17 15:11:42 來源：億速云閱讀：132 作者：Leah 欄目：web開發(fā)

Vue中怎么綁定內(nèi)聯(lián)樣式，很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

使用 v-bind:style 可以給元素綁定內(nèi)聯(lián)樣式,方法與:class類似,也有對象語法和數(shù)組語法,看起來很直接在元素上寫CSS:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例</title>
</head>
<body>
  <div id="app">
    <div :></div>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        color: 'red',
        fontSize: 14
      },
    });
  </script>
</body>
</html>

CSS屬性名稱使用駝峰命名(camelCase)或短橫分隔命名(kebab-case),渲染后的結(jié)果為:

<div >文本</div>

大多數(shù)情況下,直接寫一串的樣式不便于閱讀和維護(hù),所以一般寫在data或computed里,以data為例寫上面的示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例</title>
</head>
<body>
  <div id="app">
    <div :></div>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        color: 'red',
        fontSize: 14 + 'px' 
      },
    });
  </script>
</body>
</html>

應(yīng)用多個(gè)樣式對象時(shí),可以使用數(shù)組語法:

<div :>文本</div>

在實(shí)際業(yè)務(wù)中, :style的數(shù)組語法并不常用,因?yàn)橥梢詫懺谝粋€(gè)對象里面; 而較為常用的應(yīng)用是計(jì)算屬性.

另外,使用:style時(shí),Vue.js會(huì)自動(dòng)給特殊的CSS屬性名稱增加前綴,比如transform.

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

向AI問一下細(xì)節(jié)

Vue中怎么綁定內(nèi)聯(lián)樣式

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽