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

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

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

使用 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 :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屬性名稱使用駝峰命名(camelCase)或短橫分隔命名(kebab-case),渲染后的結(jié)果為:

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

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

<!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)用多個樣式對象時,可以使用數(shù)組語法:

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

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

另外,使用:style時,Vue.js會自動給特殊的CSS屬性名稱增加前綴,比如transform.

總結(jié)

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

相關(guān)文章

最新評論