vue-模板應(yīng)用之條件渲染
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>Title</title>
? ?<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!--緊跟著的并列元素 可以通過v-if/v-else-if/v-else來實(shí)現(xiàn)條件渲染-->
? ?<div id="app">
? ? ? ?<div v-if="number>50">
? ? ? ? ? ?<p v-if="number>200">渲染:>200</p>
? ? ? ? ? ?<p v-else-if="50<number<200">渲染:50-200</p>
? ? ? ? ? ?<p v-else>渲染:<50</p>
? ? ? ?</div>
? ? ? ?<div v-else>不渲染</div>
<!-- ? 通常更推薦template來代替包裝 因?yàn)槭褂胐iv包裝會(huì)渲染div標(biāo)簽自身 而template不會(huì)-->
? ? ? ?<template v-if="show">
? ? ? ? ? ?<p>靜夜思</p>
? ? ? ? ? ?<p>李白</p>
? ? ? ? ? ?<p>床前明月光</p>
? ? ? ?</template>
<!-- ? ?v-show是通過css樣式不展示來實(shí)現(xiàn)條件渲染 當(dāng)條件為假時(shí) v-show元素依然會(huì)存在DOM結(jié)構(gòu)中-->
<!-- ? ?在實(shí)際的條件渲染中，v-if在頻繁切換時(shí)的性能消耗更高 若組件渲染條件頻繁切換建議使用v-show -->
? ? ? ?<div v-show="number>200">
? ? ? ? ? ?v-show渲染
? ? ? ?</div>
? ?</div>
? ?<script>
? ? ? ?const App = {
? ? ? ? ? ?data(){
? ? ? ? ? ? ? ?return{
? ? ? ? ? ? ? ? ? ?number:100,
? ? ? ? ? ? ? ? ? ?show:true,
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?}
? ? ? ?// 把vue組件綁定到id=app的元素上
? ? ? ?Vue.createApp(App).mount("#app")
? ?</script>
</body>
</html>
