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& ...
随机推荐
- Attention机制的精要总结,附:中英文机器翻译的实现!
1. 什么是Attention机制 在"编码器-解码器(seq2seq)"⼀节⾥,解码器在各个时间步依赖相同的背景变量来获取输⼊序列信息.当编码器为循环神经⽹络时,背景变量来⾃它最 ...
- Linux shell 内部命令与外部命令有什么区别以及怎么辨别
内部命令实际上是shell程序的一部分,其中包含的是一些比较简单的linux系统命令,这些命令由shell程序识别并在shell程序内部完成运行,通常在linux系统加载运行时shell就被加载并驻留 ...
- Codeforces 1058 D. Vasya and Triangle 分解因子
传送门:http://codeforces.com/contest/1058/problem/D 题意: 在一个n*m的格点中,问能否找到三个点,使得这三个点围成的三角形面积是矩形的1/k. 思路: ...
- 牛客小白月赛6 A 鲲 数学
链接:https://www.nowcoder.com/acm/contest/136/A来源:牛客网 北冥有鱼,其名为鲲,鲲之大,不知其几千里也. ——<庄子·逍遥游> HtBest有一 ...
- codeforces Round #389(Div.2)C Santa Claus and Robot(思维题)
题目链接:http://codeforces.com/contest/752/problem/C 题意:给出一系列机器人的行动方向(机器人会走任意一条最短路径),问最少标记几个点能让机器人按这个 路径 ...
- CodeForces Round #499 Div2
A: Stages 题意: 给你n个字符, 现在需要从中选取m个字符,每个字符的花费为在字母表的第几位,并且如果选了某个字符, 那么下一个选择的字符必须要在字母表的2位之后, 假如选了e 那么 不能选 ...
- 并发Bug之源有三,请睁大眼睛看清它们
写在前面 生活中你一定听说过--能者多劳 作为 Java 程序员,你一定听过--这个功能请求慢,能加一层缓存或优化一下 SQL 吗? 看过中国古代神话故事的也一定听过--天上一天,地上一年 一切设计来 ...
- Python---列表的学习(二)
列表的第二部分 (1)列表的排序 1)使用方法sort()可对列表进行永久性排序 food = ['apple','orange','pear','grape'] food.sort() print( ...
- 使用Idea第一次创建一个Mavne工程时没有src目录
在使用idea创建一个maven工程时没有src目录,可能出现的问题很多,我先把我自己的问题分享上来 因为没有src,可能是因为maven插件还没下载到本地仓库.maven插件的版本和jdk版本冲突或 ...
- 这可能是国内最全面的char RNN注释
char RNN代码来源于https://github.com/hzy46/Char-RNN-TensorFlow 前言 本人在学习char RNN的过程中,遇到了很多的问题,但是依然选择一行代码一行 ...