Vue.js条件与循环
1、条件判断
(1)v-if,
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>菜鸟教程</h1>
</template>
</div>
<script>
new Vue({
el:'#app',
data:{
seen:true,
ok:true
}
});
</script>
(2)v-else-if
(3)v-else
<div id="app">
<div v-if="type === 'A' ">A</div>
<div v-else-if="type === 'B' ">B</div>
<div v-else="type === 'C' ">C</div>
</div>
<script>
new Vue({
el:'#app';
data:{
type:'C'
}
});
</script>
(4)v-show
除了v-if、v-else-if、v-else,还可以使用v-show指令来根据条件展示元素
<div id="app">
<h1 v-show="ok">Hello</h1>
</div>
<script>
new Vue({
el:'#app',
data:{
ok:true
}
});
</script>