vue.js樣式綁定
阿新 • • 發佈：2017-09-30
ger fonts 樣式 error: nts ngs clas 動態 object
vue.js樣式綁定
class 與 style 是 HTML 元素的屬性，用於設置元素的樣式，我們可以用 v-bind 來設置樣式屬性。
Vue.js v-bind 在處理 class 和 style 時， 專門增強了它。表達式的結果類型除了字符串之外，還可以是對象或數組。 class 屬性綁定
<!DOCTYPE html> <html> <head> <meta charset=‘utf-8‘> <title>style of vue</title> <script src=‘vue.min.js‘></script> <style> .active { width: 100px; height: 100px; background: green; } </style> </head> <body> <div id="app"> <div v-bind:class="{active}"> </div> </div> <script> new Vue({ el: ‘#app‘, data: { active: true } }) </script> </body> </html>
- 我們也可以在對象中傳入更多屬性用來動態切換多個class. text-danger類背景顏色覆蓋了active類的顏色：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>style of vue</title> <script src=‘vue.min.js‘></script> <style> .active { width: 100px; height: 100px; background: green; } .text-danger { background: red; } </style> </head> <body> <div id="app"> <div class="static" v-bind:class="{ active, ‘text-danger‘: hasError }"> </div> </div> <script> new Vue({ el: ‘#app‘, data: { active: true, hasError: true } }) </script> </body> </html>
- 我們也可以直接綁定數據裏的一個對象：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>object of vue style</title> <script src="vue.min.js"></script> <style> .active { width: 100px; height: 100px; background: green; } .text-danger { background: red; } </style> </head> <body> <div id="app"> <div v-bind:class="classObject"></div> </div> <script> new Vue({ el: ‘#app‘, data: { classObject: { active: true, ‘text-danger‘: true } } }) </script> </body> </html>
- 我們也可以在這裏綁定返回對象的計算機屬性。這是一個常用且強大的模式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>computed of vue style</title>
<script src="vue.min.js"></script>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="classObject"></div>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
isActive: true,
error: null
},
computed: {
classObject: function() {
return {
active: this.isActive && !this.error,
‘text-danger‘: this.error && this.error.type === ‘fatal‘,
}
}
}
})
</script>
</body>
</html>
數組語法
- 我們可以把一個數組傳給v-bind:class,實例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>array of vue style</title>
<script src="vue.min.js"></script>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
activeClass: ‘active‘,
errorClass: ‘text-danger‘
}
})
</script>
</body>
</html>
- errorClass 是始終存在的，isActive 為 true 時添加 activeClass 類：
<div v-bind:class="[errorClass ,isActive ? activeClass : ‘‘]"></div>
Vue.js style(內聯樣式)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>line style of vue</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="{color: activeColor, fontSize: fontSize + ‘px‘ }">vue學習</div>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
activeColor: ‘green‘,
fontSize: ‘30‘
}
})
</script>
</body>
<body>
- 也可以直接綁定一個樣式對象，讓模板更清晰：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Object of style</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="styleObject">vue 學習</div>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
styleObject: {
color: ‘green‘,
fontSize: ‘30px‘
}
}
})
</script>
</body>
</html>
- v-bind:style可以使用數組將多個樣式對象應用到一個元素上：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue style</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="[baseStyles, overridingStyles]">vue 學習</div>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
baseStyles: {
color: ‘green‘,
fontSize: ‘30px‘
},
overridingStyles: {
‘font-weight‘: ‘bold‘
}
}
})
</script>
</body>
</html>vue.js樣式綁定