Vue:style詳解

一、vuestyle綁定

vue:style是一個非常方便的指令，它可以在Vue組件中為HTML元素添加CSS樣式。要為元素添加樣式，可以通過v-bind:style綁定一個CSS樣式對象。

// HTML
<div v-bind:style="{ color: 'red', fontSize: '30px' }">
  This text will be red and 30px
</div>

// JavaScript
data: {
  myStyles: {
    color: 'red',
    fontSize: '30px'
  }
}

上述代碼中，用了一個對象直接綁定了樣式， 如果是一個變量的話也是同樣的使用方式。

二、vuestyle判斷

在Vue中，可以使用三元運算符來判斷是否添加某個樣式，這非常有用。例如：

// HTML
<div v-bind:style="{ color: isActive ? 'red' : 'green' }">
  This text will be red if isActive is true, or green if it is false
</div>

// JavaScript
data: {
  isActive: true
}

三、vuestyle設置

如果你想為元素添加多個CSS屬性，可以通過使用對象語法，將多個屬性添加到同一個v-bind:style綁定中。

// HTML
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
  This will be the color {{ activeColor }} and font size {{ fontSize }}px
</div>

// JavaScript
data: {
  activeColor: 'red',
  fontSize: 30
}

四、vuestyle動態綁定

你可以動態地綁定v-bind:style的對象，這對於根據一些計算屬性實現動態樣式非常有用。

// HTML
<div v-bind:style="styleObject">
  This will have the styles applied to it
</div>

// JavaScript
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  },
},
computed: {
  isNormal: function () {
    return this.styleObject.fontSize === '13px'
  }
},
watch: {
  isNormal: function (val) {
    if (val) {
      this.styleObject.color = 'green'
    } else {
      this.styleObject.color = 'red'
    }
  }
},

五、vuestyle寫變量

除了為指令傳遞對象，還可以直接在指令中書寫變量：

// HTML
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
  This will be the color {{ activeColor }} and font size {{ fontSize }}px
</div>

// JavaScript
data: {
  activeColor: 'red',
  fontSize: 30
}

六、vuestyle loader 順序

Vue Loader提供的style-Loader和CSS Loader會自動將CSS轉換為JavaScript，然後在網頁上運行。同時，你可以使用PostCSS和Sass來預處理CSS。但是，我們需要注意loaders的執行順序。

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'vue-style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader'
      ]
    }
  ]
}

七、vuestyle標籤怎麼設置

vue:style可以被賦值一個對象或是綁定一個對象。針對內聯樣式的object，它裏面的屬性名和屬性值分別用來表示CSS屬性名和屬性值。你可以使用camelCase(駝峰式)或kebab-case(短橫線) CSS屬性名來定義對應的Vue組件元素的內聯樣式。

要為一個元素設置內聯樣式，可以使用對象語法：

// HTML
<div :style="{ fontSize: size + 'px' }"></div>

// JavaScript
data: {
  size: 10,
}

八、vuestyle標籤的用法

在Vue.js的template內，你可以使用vue:style對象達到以下目的：

• 內聯樣式
• CSS Transform 2D/3D
• 使用CSS Variables來進行動態賦值CSS屬性值
• 和animate.css結合使用來添加過渡效果動畫

使用場景：

• 在特定場景下非常有用，尤其是在計算屬性值時應用動態CSS的時候
• 針對某些使用外部腳本更新選擇器的情況（如：腳本的$i++），vue:style方式會更簡單更有用

九、vue style背景圖片路徑怎麼寫

在Vue中設置背景圖片路徑的時候，需要使用require來進行文件引入，否則會無法加載圖片。示例：

// HTML
<div :style="{backgroundImage: 'url(' + imgPath + ')'}"></div>

// JavaScript
data: {
  imgPath: require('@/assets/images/bg.jpg'),
}

十、vue style 如何導入css文件

在Vue中可以通過import引入CSS文件：

// JavaScript
import '@/assets/css/styles.css';

然後在style中使用即可：

// HTML
<style lang="scss" scoped>
@import "~@/assets/css/styles.css";

.my-class {
  ...
}
</style>

總結

Vue:style指令非常方便，它可以在Vue組件中為HTML元素添加CSS樣式。通過學習本篇文章，你可以掌握vuestyle綁定、vuestyle判斷、vuestyle設置、vuestyle動態綁定、vuestyle寫變量、vuestyle loader 順序、vuestyle標籤怎麼設置、vuestyle標籤的用法、vue style背景圖片路徑怎麼寫、vue style 如何導入css文件等相關知識。