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& ...
随机推荐
- mysql count(*)与count(1)的区别
count() 对行数进行计算,包括NULL: count(column) 计算特定的列的值的行数,不包括NULL: count(1)这个用法和count()的结果是一样的. http://blog. ...
- zookeeper学习之原理
一.zookeeper 是什么 Zookeeper是一个分布式协调服务,可用于服务发现,分布式锁,分布式领导选举,配置管理等.这一切的基础,都是Zookeeper提供了一个类似于Linux文件系统的树 ...
- ZAO 换脸不安全?用 python 轻松实现 AI
最近两天一款名为 「ZAO」 的 App 刷爆了朋友圈,它的主打功能是 AI 换脸,宣称「只需一张照片,就能出演天下好戏」 : 现实中不能实现当明星的梦,在这个 App 里你可以,想演谁演谁.新鲜.好 ...
- Badboy录制模式
参考: http://leafwf.blog.51cto.com/872759/1109940 http://www.51testing.com/html/00/130600-1367743.html ...
- HDU-4725 The Shortest Path in Nya Graph (拆点+dji)
HDU 4725 The Shortest Path in Nya Graph : http://acm.hdu.edu.cn/showproblem.php?pid=4725 题意: 在一个图中跑最 ...
- codeforce#483div2C-Finite or not?数论,GCD
传送门:http://codeforces.com/contest/984/problem/C 这道题 题意:求q/p是否能用k进制有限表示小数点后的数: 思路:数学推理: 1.首先把q/ ...
- Codeforces 948D Perfect Security
Perfect Security 题意:给你一个A[i]数组, 再给你一个B[i]数组, 现在用选取 B[i] 数组中的一个 去和 A[i] 数组里的一个元素去进行异或操作, B[i]数组的元素只能用 ...
- 左偏树 P3377【模板】左偏树(可并堆)
题目传送门 代码: /* code by: zstu wxk time: 2019/03/01 */ #include<bits/stdc++.h> using namespace std ...
- 牛客第五场 G max 思维
链接:https://www.nowcoder.com/acm/contest/143/G来源:牛客网 Give two positive integer c, n. You need to find ...
- Gym 101964 题解
B:Broken Watch (别问,问就是队友写的) 代码: import java.awt.List; import java.io.BufferedInputStream; import jav ...