vue-模板应用之条件渲染

2023-04-19 02:02:47 来源:哔哩哔哩

(资料图片)

<!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> <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 v-if="show"> <p>静夜思</p> <p>李白</p> <p>床前明月光</p> </template> <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>

编辑：