vue-模板应用之条件渲染
<!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来实现条件渲染-->
<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来代替包装 因为使用div包装会渲染div标签自身 而template不会-->
<template v-if="show">
<p>静夜思</p>
<p>李白</p>
<p>床前明月光</p>
</template>
<!-- v-show是通过css样式不展示来实现条件渲染 当条件为假时 v-show元素依然会存在DOM结构中-->
<!-- 在实际的条件渲染中，v-if在频繁切换时的性能消耗更高 若组件渲染条件频繁切换建议使用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>
