Vue框架整理：動態設定樣式style、class
阿新 • • 發佈：2019-01-25
先來說一下：
:class 是可以與 一般用class 並存的
動態新增的類名是基於資料的，當對應的資料為 true 時會顯示，否則沒有
物件語法：
繫結單個class:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:200px;height:30px;margin: 100px;
} 顯示效果：
繫結多個class:
<div id="v1" class 顯示效果：
一些比較複雜的判斷等，可以通過computed計算，獲取的返回值就是class類名：
或者用methods 等等；
<div id="v1" class="normal" :class="stl">
通過計算屬性繫結style
</div>
<script src="vue.min.js"></script>
<script>
var v1=new Vue({
el:"#v1",
data:{
style1:true,
style2:true
},
computed:{
stl:function () {
return {
computedStyle:this.style1 && this.style2
}
}
}
});
</script>
陣列語法：
一般設定多個class的時候，用陣列語法繫結的比較多：
<div id="v1" :class="[ s1 , s2 ]">
陣列語法同時新增多個class
</div>
<script>
var v1=new Vue({
el:"#v1",
data:{
s1:"active1",
s2:"active2"
}
});
</script>
或使用 “三元表示式” 設定class
<div id="v1" :class="[s3 ? s1 : s2 ]">
陣列語法同時新增多個class
</div>
設定內聯樣式：
<div id="v1" :style="styles">
使用內聯：style設定樣式
</div>
<script src="vue.min.js"></script>
<script>
var v1=new Vue({
el:"#v1",
data:{
styles:{
color:'#f00',
fontSize:17+"px"
}
}
});
</script>
