vue 条件渲染方式
Vue 方式 条件 渲染
2023-09-27 14:25:36 时间
1、通过class绑定
<div :class="{'div-class': this.align == 'center'}"></div>
对应的css
.div-class { height: auto; }
其中this.align可放在data或props中
2、通过三元表达式
<div :style="{ 'height': this.align=='center' ? 'auto' : '' }"></div>
3、通过计算属性
<div :align="align" :style="getLocality"></div>
在computed中写对应的计算:
computed: { getLocality() { if(this.align === "center") { return "height: auto" } } },
相关文章
- Vue实现拖拽穿梭框功能四种方式
- vue+iview动态模板不能及时更新的问题
- Vue - 实现用 JS 调用自定义组件 / 类似 ElementUI 弹框组件(在 js 文件中通过 this.xxx 方式调用并显示自定义弹框模态框组件)
- Vue - 在纯 JS 文件中调用自定义组件 / 类似 ElementUI 弹框组件 Message、Modal(在纯 js 文件中通过 import 方式引入并调用弹框模态框组件显示出来,)
- Vue指令 - v-cloak、v-text、v-html
- Vue实现路由跳转的几种方式(直接上代码)
- vue 使用moment
- (3)打鸡儿教你Vue.js
- vue页面是否缓存的两种方式
- Vue组件间的通信方式(多种场景,通俗易懂,建议收藏)
- 在vue.config.js中模拟后端接口数据
- vue脚手架通过ui界面方式创建项目
- vue实战入门进阶篇四:vue+elementui实现网站后台-主页框架实现
- vue路由之路由的两种模式
- [js高手之路] vue系列教程 - 绑定设置属性的多种方式(5)
- 浅析Vue.use作用、原理和源码解读及为什么建议使用对象plugin.install方式
- 浅析vue-class-component介绍:用类的方式编写组件
- 浅析Vue中的2种错误处理方式、源码分析及2种错误捕获流程
- 创建vue组件与自定义一个vue组件时的区别
- flask+vue:创建一个数据列表并实现简单的查询功能(三)
- VUE 动态加载组件的四种方式
- vue cli更换版本