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. HTTP网页异常错误代码详解

    在调试TomCat,等web服务器的时候我们有时候各种错误代码铺面而来,让人头疼不已,那么这些代码究竟都代表什么呢?知道这些代码会会对我们的调试帮助很大 让我们来看一下这些代码究竟什么意思 400 无 ...

  2. JavaScript 数据结构与算法之美 - 栈内存与堆内存 、浅拷贝与深拷贝

    前言 想写好前端,先练好内功. 栈内存与堆内存 .浅拷贝与深拷贝,可以说是前端程序员的内功,要知其然,知其所以然. 笔者写的 JavaScript 数据结构与算法之美 系列用的语言是 JavaScri ...

  3. Leetcode之深度优先搜索(DFS)专题-733. 图像渲染(Flood Fill)

    Leetcode之深度优先搜索(DFS)专题-733. 图像渲染(Flood Fill) 深度优先搜索的解题详细介绍,点击 有一幅以二维整数数组表示的图画,每一个整数表示该图画的像素值大小,数值在 0 ...

  4. Leetcode之回溯法专题-39. 组合总数(Combination Sum)

    Leetcode之回溯法专题-39. 组合总数(Combination Sum) 给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使 ...

  5. wait()、notify()方法原理,以及使用注意事项

    wait.notify原理 在前面以经说到对象锁的本质,实际上是对象头的一个监视器锁的数据结构.这个结构如下: (图片来源于网络) 几个线程一起竞争对象的锁(enter),只有一个能成功(acquir ...

  6. Java NIO 上

    概述: NIO主要有三大核心部分:Channel(通道),Buffer(缓冲区), Selector. 传统IO基于字节流和字符流进行操作,而NIO基于Channel和Buffer(缓冲区)进行操作, ...

  7. (一)LinkedList集合解析及手写集合

    一.LinkedList集合特点 问题 结      论 LinkedList是否允许空 允许 LinkedList是否允许重复数据 允许 LinkedList是否有序 有序 LinkedList是否 ...

  8. HDU4289Control 无向图拆点最大流

    /* ** 无向图拆点,求最大流,最大流即为割点个数. */ #include <iostream> #include <cstdio> #include <cstrin ...

  9. 题解 UVA11000 【Bee】

    传送门 [题目描述] 在非洲有一种非常特殊的蜜蜂.每年,这种蜜蜂的一只雌蜂生育一只 雄蜂,而一只雄蜂生育一只雌蜂和一只雄蜂,生育后它们都会死去!现在科学家们意外地发现了这一特殊物种的一只神奇的雌蜂,她 ...

  10. Codeforces1093E_Intersection of Permutations

    题意 给定两个排列a和b,两种操作,交换b_i和b_j,询问a[l_a...r_a]和b[l_b...r_b]有多少个数相同. 分析 由于给的是排列,保证b的每个数都有a的对应,构造数组c,c[i]表 ...