[Vue] Conditionally Render DOM Elements in Vue.js (v-if v-else v-show)
2023-09-14 09:00:52 时间
You can use v-if
and v-else
to display content based on assertions on your data. Similarly, v-show
can be used to render the content, but hide it with css. v-if
can also be used on an invisible wrapper <template>
element.
v-if v-else:
It is good that when you use 'v-if' you wrap the html into '<template>':
<template v-if="counter > 5"> <div>Show if the counter is greater than five</div> </template>
'v-else': will be rendered if the closeset 'v-if' doesn't render:
<template v-if="counter > 5"> <div>Show if the counter is greater than five</div> </template> <div v-else>Show the counter is smaller than five</div>
v-show:
<button @click="dec" v-show="counter > 0">-</button> <button @click="inc" v-show="counter < 5">+</button>
相关文章
- 不用React Vue,只用原生JS,如何开发单页面应用?
- JS之在Vue对象内部获取vue对象的索引(箭头函数的闭包导致this代表的是函数本身)「建议收藏」
- vue详解_vuex getters
- 前端vue面试题2021及答案_redux面试题
- vue源码分析-事件机制
- 不负青春,不负韶华 —— 又一低代码平台Vue Admin Work B 开源了
- vue.js和jquery的区别_人和人类的区别是什么
- js 生成二维码 vue项目
- Vue生成二维码_vue视频软件怎么生成二维码
- vue业务组件封装_怎么去设计一个组件封装
- vue 分页请求
- Vue调试工具安装(vue devtools)
- Vue打包优化之code spliting
- vue.js客服系统实时聊天项目开发(一)路由与子路由-全局变量-elementui搭建基本框架
- VUE路由设置history模式刷新404处理
- vue.js客服系统实时聊天项目开发(八)使用axios post请求访客初始化接口
- js ajax 设置代理ip(vue Ajax 设置 代理ip)
- 使用Vue技术从MSSQL中获取数据(vue获取mssql数据)
- 优雅的Vue请求Redis驱动的高性能服务(vue请求redis)