欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue綁定內(nèi)聯(lián)樣式問(wèn)題

 更新時(shí)間：2018年10月17日 11:43:11   作者：一葉扁舟丶  
這篇文章主要介紹了Vue綁定內(nèi)聯(lián)樣式的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例</title>
</head>
<body>
  <div id="app">
    <div :style="{ 'color': color, 'fontSize': fontSize + 'px' }"></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屬性名稱(chēng)使用駝峰命名(camelCase)或短橫分隔命名(kebab-case),渲染后的結(jié)果為:

<div style="color: red; font-size: 14px">文本</div>

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例</title>
</head>
<body>
  <div id="app">
    <div :style="styles"></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è)樣式對(duì)象時(shí),可以使用數(shù)組語(yǔ)法:

<div :style="[styleA, styleB]">文本</div>

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

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

總結(jié)

以上所述是小編給大家介紹的Vue綁定內(nèi)聯(lián)樣式問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論