一节猿、綁定 HTML Class
.HTML Class 所有的主流瀏覽器都支持class屬性
.Class屬性通常用于指向樣式表中的類(lèi)
例如 CSS樣式表中添加一個(gè)active樣式類(lèi)
.active {
height: 50px;
width: 100px;
background: #F29
}
HTML
<div id="app-12"
calss = "static"
v-bind:class = "{active:isActive,'text-danger':hsError}"
>12.綁定HTML Class</div>
JS
var app12 = new Vue({
el: 'app-12',
data: {
isActive: ture,
hasError: false
}
})
運(yùn)行結(jié)果：
首次運(yùn)行時(shí)，isActive=true
html：<div id="a12" class="static active text-danger">12.綁定HTML CLass</div>
CSS樣式起作用歌馍，背景色是粉色
在控制臺(tái)輸入：app12.isActive=false
html:<div id="app-12" class="static text-danger">12.綁定HTML CLass</div>
CSS樣式不起作用宵呛，背景色無(wú)變化
二藕坯、條件渲染
1伍纫、v-if,v-else
HTML
<div id="app-17">
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
</div>
JS
var app17 = new Vue({
el: '#app-17'
})
2、 v-if ,v-else if,v-else
HTML
<div id="app-18">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
JS
var app18 = new Vue({
el: '#app-18',
data: {
type: 'C'
}
})
