v-text:
<div id = "app">
<p v-text="msg"></p>
</div>
<script>
let app = new Vue({
el:'#app',
data:{
msg:'Hello Vue'
}
})
</script>
// 可见v-text在某种程度上等价于 {{}}
v-show:
<div id = "app">
<div v-show="show1">我将显示</div>
<div v-show="show2">我将隐藏</div>
</div>
<script>
let app = new Vue({
el:'#app',
data:{
show1:true,
show2:false
}
});
</script>
v-if:
<div id="app">
<div v-if="show1">我将显示</div>
<div v-if="show2">我将不存在</div>
</div>
<script>
let app = new Vue({
el:'#app',
data:{
show1:true,
show2:false
}
});
</script>
// 可见v-if为false时,并未渲染到dom中,而v-show为false时,是将display属性置为none.
v-else:
// 和v-if成对出现
<div id = "app">
<div v-if ="show1">我将显示</div>
<div v-else>我...</div>
<div v-if="show2">我不显示</div>
<div v-else>我好像显示</div>
</div>
<script>
let app = new Vue({
el:'#app',
data:{
show1:true,
show2:false
}
});
</script>