条件渲染
v-if
v-else,v-else-if
v-show
<div id="app">
<div v-if="count > 0">
判断1:count 大于 0,count的值是:{{count}}
</div>
<div v-else-if="count < 0 && count > -5">
判断2:count的值是:{{count}}
</div>
<div v-else>
判断3:count的值:{{count}}
</div>
<div v-show = "count == -1">
show:{{count}}
</div>
{{msg}}
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: 'hello thinker',
count: 0
}
})
</script>
列表渲染
v-for
v-for与v-if结合使用
v-for高阶用法
<div id="app">
{{msg}}
<div v-for="item in list">
<div v-if="item.age > 21">
{{item.name}}
</div>
<div v-else>
{{item.age}}
</div>
</div>
<div v-for="item in list">
<div v-show="item.age>22">
{{item.name}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello thinker!!',
list: [{
name: 'thinker',
age: 21
}, {
name: 'dabai',
age: 24
}]
}
})
</script>
Class与Style绑定
<div id="app">
{{msg}}
<!-- <div v-for="item in list">
<div v-if="item.age > 21">
{{item.name}}
</div>
<div v-else>
{{item.age}}
</div>
</div> -->
<div v-for="item in list">
<div v-show="item.age>22"
:class="['actives','add','more',{'another':true},{'panduan':item.age < 30}]"
:style="styleMsg">
{{item.name}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello thinker!!',
styleMsg: {
color: 'red',
textShadow: '0 0 5px green'
},
list: [{
name: 'thinker',
age: 21
}, {
name: 'dabai',
age: 24
}]
}
})
</script>