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>
