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. 简明Python教程-函数联系笔记

    1.实参与形参 在定义函数时给定的名称称作"形参",再调用函数时你所提供给函数的值称作“实参” 2.局部变量 所有变量的作用域是它们被定义的块,从定义它们的名字的定义点开始. 3. ...

  2. [Error] - Windows卸载程序时,提示错误2503

    1. 打开“任务管理器” 2. 切换到“详细信息”标签页,找到explorer.exe文件,并结束它. 3. 点击“任务管理器”上的文件->运行新任务,输入explorer.ext,勾选“以系统 ...

  3. CF 551 D.Serval and Rooted Tree 树形DP

    传送门:http://codeforces.com/contest/1153/problem/D 思路: 这道题想了一天,突发奇想,就是维护每个点两个值,第几大和第几小,就可以有传递性了. #incl ...

  4. codeforces 807 D. Dynamic Problem Scoring(贪心+思维)

    题目链接:http://codeforces.com/contest/807/problem/D 题意:对于动态计分的 Codeforces Round ,已知每题的 score 是根据 Round ...

  5. Java服务器-Disruptor使用注意

    最近看了一下部署游戏后台的服务器状况,发现我的一个Java程序其占用的CPU时长超过100%,排查后发现竟是Disruptor引起的,让我们来看看究竟为什么Disruptor会有这样的表现. 发现占用 ...

  6. cve_2019_0708_bluekeep复现采坑

    0X01 简介 Microsoft Windows是美国微软公司发布的视窗操作系统.远程桌面连接是微软从Windows 2000 Server开始提供的功能组件. 2019年5月14日,微软发布了月度 ...

  7. github初学者搭建自己的网站

    如何利用github打造博客专属域名 感谢园友的无私共享-- http://www.cnblogs.com/xuehaoyue/p/6551217.html 选分支 建立好库,在设置 这里选择博客类型 ...

  8. mariadb数据库galera下添加新的服务器节点

    昨天经过各种努力,终于完成了两台服务器集成的搭建,今天再新开一台服务器,在想如何加入呢?网上度娘了很久结果没搜到相关文章:哎,索性直接照着前两台服务配置,在第三台(新服务器)上配置完成后重启maria ...

  9. Python入门基础:七段数码管绘制

    1.在学习Python的过程中,运用所学的一些基础知识,进行一些简单的编程,可以收获很多乐趣.在生活中,LED灯无处不在,荧幕显示的广告词,给我们呈现出动态的视觉效果.下面,则以最简单的显示日期为例, ...

  10. MySQL中boolean类型设置

    在用MySQL设置boolean的时候发现跟本就没有这种类型,后来查资料才知道: boolean类型用tinyint表示, MYSQL保存BOOLEAN值时用1代表TRUE,0代表FALSE,bool ...