vue 条件渲染方式
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条件渲染
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08 一 v-if显示单个元素 注意else只能跟在v-if或者v-s ...
- vue 条件渲染与列表渲染
本文是对官方文档的整理 因为 v-if 是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v ...
- Vue#条件渲染
根据不同的条件,响应不同的事件. https://jsfiddle.net/miloer/zed5p1r3/ 可以用template来包装元素,当然浏览器的最终渲染结果不会包含它.我觉得主要用它来自定 ...
- [vue]vue条件渲染v-if(template)和自定义指令directives
条件渲染: v-if/template <div id="app"> <h1>v-show: display: none</h1> <di ...
- (尚008)Vue条件渲染
1.test008.html <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...
- vue 条件渲染 v-if v-show
1.要点 1.1 v-if 条件性地渲染一块内容 <h1 v-if="awesome">Vue is awesome!</h1> 附带 / v- ...
- vue条件渲染2
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue 条件渲染v-if v-show
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue.js选择if(条件渲染)详解
vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...
随机推荐
- 初识云计算 -《AWS云端企业实战圣经》读书笔记
原书中涉及实操的地方,在本文中被省略.一是篇幅太长,放入文中太过累赘,二是原书成书过早,现在 AWS 的界面早已变化很大,不具备参考性. 第一章 谁在使用云计算 1.什么是云计算 云计算(cloud ...
- vue 自动化路由实现
1.需求描述 在写vue的项目中,一般情况下我们每添加一个新页面都得添加一个新路由.为此我们在项目中会专门的一个文件夹来管理路由,如下图所示 那么有没有一种方案,能够实现我们在文件夹中新建了一个vue ...
- C#开发BIMFACE系列19 服务端API之获取模型数据4:获取多个构件的共同属性
系列目录 [已更新最新开发文章,点击查看详细] 在前几篇博客中介绍了一个三维文件/模型包含多个构建,每个构建又是由多种材质组成,每个构建都有很多属性.不同的构建也有可能包含相同的属性. 上图中 ...
- 【selenium】- selenium简介
本文由小编根据慕课网视频亲自整理,转载请注明出处和作者. 1. Selenium的来历 2. Selenium家庭成员 Selenium RC: Selenium 1 Selenium Webdriv ...
- HDU-2089不要62-暴力或数位DP入门
不要62 题意:给定区间,求在这个区间中有多少个数字,不包含4且不包含62: 这道题作为数位DP的入门题: 暴力也是可以过 #include<cstdio> #include <io ...
- hdu 1176免费馅饼(记忆化搜索)
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1176 题意不解释了 简单的记忆化搜索可以拿来练练手,注意要从pos = 5 开始搜索 #include ...
- Java 编程语言中很少被人了解的特性-statement label
下面的语句会编译报错或者打印什么? System.out.print("baidu site :"); https://www.baidu.com; System.out.prin ...
- 4.Sentinel源码分析— Sentinel是如何做到降级的?
各位中秋节快乐啊,我觉得在这个月圆之夜有必要写一篇源码解析,以表示我内心的高兴~ Sentinel源码解析系列: 1.Sentinel源码分析-FlowRuleManager加载规则做了什么? 2. ...
- 在asp.net core中使用托管服务实现后台任务
在业务场景中经常需要后台服务不停的或定时处理一些任务,这些任务是不需要及时响应请求的. 在 asp.net中会使用windows服务来处理. 在 asp.net core中,可以使用托管服务来实现,托 ...
- FreeSql (十八)导航属性
导航属性是 FreeSql 的特色功能之一,可通过约定配置.或自定义配置对象间的关系. 导航属性有 OneToMany, ManyToOne, ManyToMany, OneToOne, Parent ...