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& ...
随机推荐
- HDU 6052
题意略. 思路:我们单独考虑每种颜色的贡献,颜色c对答案的贡献 == 含有c的矩形个数,这就是在考查我们计数的能力,暴力可过. #include<bits/stdc++.h> #defin ...
- SpringBoot_@valid_参数校验
SpringBoot @valid 参数校验 空检查 @Null 验证对象是否为null @NotNull 验证对象是否不为null, 无法查检长度为0的字符串 @NotBlank 检查约束字符串是不 ...
- 使用WPF为Powershell程序制作GUI界面
1. 使用Xaml创建应用界面 打开visual studio,创建一个新的项目,在已安装模板中选择Visual C# →Wpf应用. 完成创建后,我们得到如下图所示的应用界面. wpf界面是基于xa ...
- CSS文件引入link和@import 区别
1.(本质区别)link 属于 HTML 标签,而 @import 完全是 css 提供的一种导入 css 文件的规则. 2.文件加载时机有差别: 当一个页面被加载的时候,link 引用的 css 会 ...
- 一文看尽Java-Thread
一.前言 主要分成两部说起:Thread源码解读和常见面试题解答,废话不多说开始: 二.源码解读 首先看下构造函数,构造函数都是通过调用init方法对属性进行初始化,主要是对线程组.线程名字 ...
- XMind使用教程入门
什么是思维导图 借用百度百科的介绍,思维导图又称脑图.心智导图.是一种将思维形象化的方法,它利用图文并重的方法,将各级主题之间的关系用相互隶属与相关的层级图表现出来,将主题关键词与图像.颜色等建立记忆 ...
- phpcms v9.6.0任意文件上传漏洞(CVE-2018-14399)
phpcms v9.6.0任意文件上传漏洞(CVE-2018-14399) 一.漏洞描述 PHPCMS 9.6.0版本中的libs/classes/attachment.class.php文件存在漏洞 ...
- CF - 1131 D Gourmet choice
题目传送门 先把 = 的人用并查集合并在一起. 然后 < > 的建边, 跑一遍 toposort 之后就好了. 入度为0点的值肯定为1, 然后就是因为这个是按照时间线走过来的,所以一个点的 ...
- 微信小程序 自定义组件 多列选择器 对象数组 ObjectArray 自关联 三级联动
使用方法 在 Page.json 注册组件 { "usingComponents": { "address-picker": "/component/ ...
- Java中时间API使用详解
目录 Java中时间API使用详解 1. 时区概念 2. 几种常见的时间 3. 时间戳 4. Java中的时间API 5. Java8中新添加的时间API 6. 在东八区的机器上获得美国时间 Java ...