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 条件渲染方式的更多相关文章

  1. Vue条件渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08 一 v-if显示单个元素 注意else只能跟在v-if或者v-s ...

  2. vue 条件渲染与列表渲染

    本文是对官方文档的整理 因为 v-if 是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v ...

  3. Vue#条件渲染

    根据不同的条件,响应不同的事件. https://jsfiddle.net/miloer/zed5p1r3/ 可以用template来包装元素,当然浏览器的最终渲染结果不会包含它.我觉得主要用它来自定 ...

  4. [vue]vue条件渲染v-if(template)和自定义指令directives

    条件渲染: v-if/template <div id="app"> <h1>v-show: display: none</h1> <di ...

  5. (尚008)Vue条件渲染

    1.test008.html <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...

  6. vue 条件渲染 v-if v-show

    1.要点 1.1 v-if     条件性地渲染一块内容 <h1 v-if="awesome">Vue is awesome!</h1> 附带  /  v- ...

  7. vue条件渲染2

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. vue 条件渲染v-if v-show

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. vue.js选择if(条件渲染)详解

    vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. MySql优化相关概念的理解笔记

    MySQL架构 查询执行流程 查询执行的流程是怎样的: 连接1.1客户端发起一条Query请求,监听客户端的‘连接管理模块’接收请求1.2将请求转发到‘连接进/线程模块’1.3调用‘用户模块’来进行授 ...

  2. ubuntu使用yum安装软件问题

    其实ubuntu是不应该用yum来管理软件安装的,只是后来才发现的,这里记录一下尝试的过程. 一开始是想把windows桌面上的文件拖到xshell登录的ubuntu的目录中,但是没成功,参考http ...

  3. [python]错误检测及异常处理try-except

    1. 简介 要给代码添加错误检测及异常处理,只需要将其封装在try-except中. try:通常的代码 except:处理错误和异常的代码 2. 示例 import os try: path = ' ...

  4. 图论之拓扑排序 poj1128 Frame Stacking

    题目网址 http://poj.org/problem?id=1128 思路:遍历找出每一种字母出现的最大和最小的横纵坐标,假如本应出现字母A的地方出现了字母B,那么A一定在字母B之前,这就相当于点A ...

  5. POJ 2230 Watchcow 欧拉图

    Watchcow Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 8800   Accepted: 3832   Specia ...

  6. 数论 线性同余方程的应用 poj2891

    Strange Way to Express Integers Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 17321 ...

  7. CH 4302 Interval GCD 题解

    题意 给定一个长度为N的数列A,以及M条指令 (N≤5* 10^5, M<=10^5),每条指令可能是以下两种之一: "C l r d",表示把 A[l],A[l+1],-, ...

  8. @override 重写 与重载

    方法的重写(Overriding)和重载(Overloading)是Java多态性的不同表现.重写(Overriding)是父类与子类之间多态性的一种表现,而重载(Overloading)是一个类中多 ...

  9. SpringBoot发送邮箱验证码

    一.开启QQ邮箱服务 (1)登陆QQ找到设置,点击账户 (2)往下拉,开启POP3/SMTP服务和IMAP/SMTP服务 当开启IMAP/SMTP会有一串密文密码,保存起来后面要用到 二.spring ...

  10. DELPHI GDI + TGPFont UnitPixel 问题解决

    查不少资料,在 GPfont := TGPFont.Create(fontFamily, Font.Size , FontStyleRegular,UnitPixel ); 时,显示的字体,并不是按D ...