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& ...
随机推荐
- Delphi - StringReplace用法
StringReplace用法 在开发过程中,有时候我们需要对字符串进行替换操作,屏蔽或者和谐某些字符,可使用Delphi自带的函数StringReplace函数. 通过代码进行说明: //函数原型 ...
- asp.net comp雷达图
<system.web> <httpHandlers> <add path="ChartImg.axd" verb="GET,HEAD,PO ...
- Asp.net之MsChart控件动态绑定温度曲线图
<div> <div style="position: absolute; z-index: 200; background-color: #FFFFFF; height: ...
- Mysql高手系列 - 第5天:DML操作汇总,确定你都会?
这是Mysql系列第5篇. 环境:mysql5.7.25,cmd命令中进行演示. DML(Data Manipulation Language)数据操作语言,以INSERT.UPDATE.DELETE ...
- vue.js如何根据后台返回来的图片url进行图片下载
最近在做一个前端vue.js对接的功能模块时,需要实现一个下载图片的功能,后台返回来的是一串图片url,试了很多种方法,发现点击下载时出来的效果都是跳着到一个新的图片网页,后来经过一番琢磨,终于解决了 ...
- xcode7中搭建python开发环境
1. 双击打开Xcode 2. 点击File->New->New Project 3. 在左边的面板选择Other,右边选择External Build Sytem,点击Next 4. 输 ...
- codeforces 799 C. Fountains(二分+思维)
题目链接:http://codeforces.com/contest/799/problem/C 题意:要求造2座fountains,可以用钻石,也可以用硬币来造,但是能用的钻石有限,硬币也有限,问能 ...
- codeforces 805 E. Ice cream coloring(dfs)
题目链接:http://codeforces.com/contest/805/problem/E 题意:你有n个节点,这个n个节点构成一棵树.每个节点拥有有si个类型的ice,同一个节点的ice互相连 ...
- 【Offer】[19] 【字符串匹配】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 请实现一个函数用来匹配包括'.'和'*'的正则表达式. 模式中的字符'.'表示任意一个字符,而'*'表示它前面的字符可以出现任意次(包含 ...
- 如何在 Ubuntu 上安装 MongoDB
MongoDB 是一个越来越流行的自由开源的 NoSQL 数据库,它将数据存储在类似 JSON 的灵活文档集中,这与 SQL 数据库中常见的表格形式形成对比. 你很可能发现在现代 Web 应用中使用 ...