VUE3 之 条件渲染
2022-03-12 本文已影响0人
追风人聊Java
1. 概述
老话说的好：要锻炼逆向思维，人取我弃，人弃我取。
言归正传，今天我们来聊聊 VUE3 的条件渲染。
2. 条件渲染
2.1 v-if
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
show: true
}
},
template : '<div v-if="show">hello</div>'
});
// vm 就是vue应用的根组件
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
当 show 变量为 false，则 div 元素会被清除
2.2 v-show
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
show: false
}
},
template : '<div v-show="show">hello</div>'
});
// vm 就是vue应用的根组件
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
当 show 变量为 false，div 元素会被加上 style="display: none;"
2.3 v-else
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
show: false
}
},
template : `
<div v-if="show">hello1</div>
<div v-else>hello2</div>
`
});
// vm 就是vue应用的根组件
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
支持 if else 的写法
2.4 v-else-if
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
show: false,
show2 : true
}
},
template : `
<div v-if="show">hello1</div>
<div v-else-if="show2">hello3</div>
<div v-else>hello2</div>
`
});
// vm 就是vue应用的根组件
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
支持 else if 判断
3. 综述
今天聊了一下 VUE3 的 条件渲染，希望可以对大家的工作有所帮助
欢迎帮忙点赞、评论、转发、加关注 ：）
关注追风人聊Java，每天更新Java干货。
