學(xué)習(xí)心得,
Class 與 Style,
直接上代碼了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class 與 Style 綁定</title>
<style>
.active{
color:red;
}
.text-danger{
font-weight: bold;
}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app-1-1" v-bind:class="{ active: isActive, 'text-danger': hasError }">
{{msg}}
</div>
<hr>
<div id="app-1-2" v-bind:class="classObj">
{{msg}}
</div>
<hr>
<div id="app-1-3" v-bind:class="classObj">
{{msg}}
</div>
<hr>
<div id="app-2-1" v-bind:class="[activeClass,errorClass]">
{{msg}}
</div>
<br>
<div id="app-2-2" v-bind:class="[isActive ? activeClass : '', errorClass]">
{{msg}}
</div>
<br>
<div id="app-2-3" v-bind:class="[{ active: isActive }, errorClass]">
{{msg}}
</div>
<hr>
<div id="app-3-1">
<my-zujian class="baz boo"></my-zujian>
</div>
<br>
<div id="app-3-2">
<my-zujian v-bind:class="{active:isActive}"></my-zujian>
</div>
<hr>
<div id="app-4-1" v-bind:style="{color:activeColor,fontSize:activeSize+'px'}">{{msg}}</div>
<br>
<div id="app-4-2" v-bind:style="styleObject">{{msg}}</div>
<br>
<div id="app-4-3" v-bind:style="[styleOne,styleTwo]">{{msg}}</div>
<hr>
<div id="app-5" v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">
{{msg}}
</div>
<hr>
<script>
//v-bind:class="xxx:xxx",動態(tài)綁定class
var app1 = new Vue({
el:"#app-1-1",
data:{
msg:"添加上屬性會變色",
isActive:true,
hasError:false
}
});
//v-bind:class="",不一定要綁定在模板里,可以把模板設(shè)置對象然后傳對象
var app2 = new Vue({
el:"#app-1-2",
data:{
msg:"添加上屬性會變色",
classObj:{
active:true,
'text-danger':true
}
}
});
//v-bind:class="",也可以返回一個對象
var app3 = new Vue({
el:"#app-1-3",
data: {
msg:"添加上屬性會變色",
isActive: true,
error: null
},
computed: {
classObj: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
});
//數(shù)組語法
var app4 = new Vue({
el:"#app-2-1",
data:{
msg:'添加上屬性會變色',
activeClass:'active',
errorClass:'text-danger'
}
});
//數(shù)組語法,如果你也想根據(jù)條件切換列表中的 class，可以用三元表達(dá)式：
var app5 = new Vue({
el:"#app-2-2",
data:{
msg:'添加上屬性會變色,三元,isActive為true時',
isActive:true,
activeClass:'active',
errorClass:'text-danger'
}
});
//數(shù)組語法,當(dāng)有多個條件 class 時這樣寫有些繁瑣。所以在數(shù)組語法中也可以使用對象語法：
var app6 = new Vue({
el:'#app-2-3',
data:{
msg:'添加上屬性會變色,對象,isActive判斷active的存在,為false時',
isActive:false,
errorClass:'text-danger'
}
})
//用在組件上,當(dāng)在一個自定義組件上使用 class 屬性時，這些類將被添加到根元素上面。這個元素上已經(jīng)存在的類不會被覆蓋。
Vue.component('my-zujian',{
template:'<p class="foo bar">HI~~</p>'
});
var app7 = new Vue({
el:'#app-3-1',
data:{
}
});
//對于帶數(shù)據(jù)綁定 class 也同樣適用：
var app8 = new Vue({
el:'#app-3-2',
data:{
isActive:true
}
});
//v-bind:style 的對象語法十分直觀——看著非常像 CSS，
// 但其實是一個 JavaScript 對象。
// CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號括起來) 來命名：
var app9 = new Vue({
el:'#app-4-1',
data:{
msg:'我愛你悅悅',
activeColor:'red',
activeSize:'26'
}
});
//v-bind:style="{xxx}"也可以寫成對象
// 直接綁定到一個樣式對象通常更好，這會讓模板更清晰：
var app10 = new Vue({
el:'#app-4-2',
data:{
msg:'我愛你悅悅',
styleObject:{
color:'red',
fontSize:'26px'
}
}
});
//v-bind:style 的數(shù)組語法可以將多個樣式對象應(yīng)用到同一個元素上：
var app11 = new Vue({
el:'#app-4-3',
data:{
msg:'我愛你悅悅',
styleOne:{
color:'red',
fontSize:'26px'
},
styleTwo:{
fontWeight:'bold'
}
}
});
//自動添加前綴
//當(dāng) v-bind:style 使用需要添加瀏覽器引擎前綴的 CSS 屬性時，
// 如 transform，Vue.js 會自動偵測并添加相應(yīng)的前綴。
//多重值
//從 2.3.0 起你可以為 style 綁定中的屬性提供一個包含多個值的數(shù)組，
// 常用于提供多個帶前綴的值，例如：
var app12 = new Vue({
el:'#app-5',
data:{
msg:'悅悅我愛你'
}
})
</script>
</body>
</html>
