vue v-if判断显示css样式

原创 已于 2023-01-17 10:41:00 修改 · 1.1k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css #vue.js #前端
于 2023-01-17 10:17:59 首次发布
文章探讨了如何利用三元判断式在编程中简洁地处理条件展示，同时提到如果不希望引入共有样式，可以省略相关代码。此内容适用于提升程序的可读性和效率。

记录一下，

可以用三元判断式显示，不想加共有样式的话可以去掉

-----------------------------------------------------补充----------------------------------------------------------

甚至能再写一个静态class在下面操控样式

 

 

 

VUE中V-IF条件判断改变元素的样式操作
12-28
方法一 v-if判断后用标签改变样式（特定显示列字体加粗） {{col.text}} {{item[col['value']]}} </v-list-i
Vue 动态改变css样式的方法总结
飞翔༒之翼
04-21 3285
在网页开发中，我们经常会遇到动态的改变某个元素样式的需求，在vue里如何实现呢？官网上其实写的很详细了，对象语法，数组语法等。我自己总结了在开发中，个人用的比较多的三种方式。
vue条件判断
m0_73894967的博客
05-15 408
条件 为false --- 销毁 --- 默认开始 - false 不创建不销毁。v-show:无论表达式值是true或者false,都会进行编译缓存渲染。v-if:局部编译,切换时会重建或销毁组件内部的事件监听和子组件。v-show:编译之后基于css进行显示隐藏,dom始终存在。v-show:控制css中display属性进行显示隐藏。v-if:惰性的,只有表达式为true,进行编译缓存渲染。条件 为true --- 创建。v-show:切换条件较多。3.v-if与v-show的区别。
vue中根据条件对css属性进行添加
qq_46186155的博客
08-07 2074
可以使用v-bind:class"{active:item.id===currentIndexNav}"， 当表达式item.id===currentIndexNav为true时，设置的active样式才会显示出来。 <view @click="activeNav(item.id)" v-for="(item,index) in navList" :key="index" v-bind:class="{nav_item:true,active:item.id===currentIndexNav}"&g
vue之css判断
qq_36939013的博客
05-09 3122
基本样式 :class="{active:nowIndex===0}" 复合样式 :class="[{warn:record.currentMonthActualDays < record.currentMonthExpectDays},'cursorPointer']"
Vue.js 实现v-if和v-else来切换CSS样式
怎奈你何的博客
12-25 3458
一、要想使用Vue.js实现v-if和v-else来切换CSS样式，有两种实现方式： 比如我们想给一个div设置两个不同的背景颜色（当status为1的时候，我们设置背景为红色，当status状态为2的时候我们设置背景为蓝色）： .back-red{ /* 红色背景 */ width: 100px; height: 100px; background-color: red; } .back-blue{ /* 蓝色背景 */ width: 100px; height: 100px; ba
v-show 和 v-if
四月
08-09 267
v-show和v-if都是用来做条件渲染的 使用方法： <div v-if="isShow">v-if显示/隐藏</div> <div v-show="isShow">v-show显示/隐藏</div> 区别 v-show： 控制DOM元素显示，其实控制的是css样式，也就是display:noe v-if进行判断，在浏览器中预览，你会发现整个DOM元素都不见了 v-show初始会渲染dom，v-if如果是f.
vue学习第六章(条件显示）
雨溪的博客
11-17 924
​ v-show 不管条件是真还是假，第一次渲染的时候都会编译出来，也就是标签都会添加到DOM中。​ v-if 在首次渲染的时候，如果条件为假，什么也不操作，页面当作没有这些元素。v-if、v-else、v-else-if联合使用相当于if、elseif、else，但是在条件比较多的时候建议使用计算属性。的大学生,如果我的文章给你带来的帮助,欢迎您关注我,我会持续不断的更新更多优质文章.你的关注就是我的动力!vue在进行DOM渲染是，处于性能考虑，会复用已经存在的元素，而不是每次都创建新的DOM元素。
v-show指令与v-if指令区别
weixin_42101753的博客
05-14 210
<body> <!-- v-show: 作用控制一个元素的显示或者隐藏 v-show="值" 这个值如果是true，就是显示 否则隐藏 v-if="值" 也是用于控制元素的显示和隐藏 如果值为true就是显示，如果是false就隐藏 共同点：v-show和v-if都可以控制元素的显示和隐藏 区别： v-show通过样式的显示和隐藏来控制 v-if通过创建和删除元素来控制
VUE学习之------v-show v-if
liubangbo的专栏
07-31 4335
v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上，有更高的初始渲染消耗，适合做频繁的额切换； v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点，有更高的切换消耗，不适合做频繁的切换；   &lt;style&gt; .isShowStyle{ display: block; } .isIfStyle{ displ...
列表循环和条件判断
四月
08-09 732
条件判断：一般都用v-show和v-if v-show和v-if都是用来做条件渲染的 使用方法： <div v-if="isShow">v-if显示/隐藏</div> <div v-show="isShow">v-show显示/隐藏</div> 区别 v-show： 控制DOM元素显示，其实控制的是css样式，也就是display:noe v-if进行判断，在浏览器中预览，你会发现整个DOM元素都不见了 v-
VUE根据文件后缀显示不同的图标（文件列表展示）
qq_43725946的博客
01-21 3434
一、最近想做一个文件上传管理系统。展示文件仿照百度云那样有图标，有文件名，做文件列表显示。记录下代码。 <div class="item_list"> <div v-for="item in list" class="file_item"> <div style="width: 24px;height: 24px;margin: 0 auto;"><img src="src/components/images/image-icon.png" v-i
前端根据后端返回状态来判断进行中文显示并定义中文样式
cqzdmm的博客
02-14 864
前端根据后端状态来判断进行中文显示并定义中文样式
v-show 和 v-if 指令的共同点和不同点?
wuwenhao的博客
06-30 343
v-show 和 v-if 指令的共同点和不同点?
Vue常用指令
最新发布
Happy_ZKx的博客
04-10 457
作用:给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升染性能推荐使用id作为key(唯一)，不推荐使用index作为key(会变化，不对应)v-else 必须出现在v-if/v-else-if之后。动态的为标签的属性绑定值，不能使用插值表达式，得使用 v-bind 指令。常用指令:HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。语法:v-show="表达式"，表达式值为 true，显示;语法:v-if="表达式"，表达式值为 true，显示;
关于使用vue来渲染出一张简易九九乘法表
qq_68297714的博客
07-14 531
二、 接下来就是写javascript部分 使得rows，columns值都为九 三、 可以看到现在基本上已经出现了，但是这样子导致了数字有多余 现在就需要用v-if进行一次判断从而达到去重的目的 进行一次判断确认是否需要输出 - 四、 最后的样子及代码
前端面试题之v-if和v-show的区别
m0_59567434的博客
07-27 489
v-if和v-show的区别：v-if操作DOM树，频繁使用影响性能。v-show通过css样式display：none来隐藏元素，对性能影响较小。
vue2.0用js和jquery设置包含v-if的组件样式无效的的情况
Vegas柠檬的博客
11-24 2277
昨天下午做毕设的时候动态设置弹框的css样式一直无效，查看网页源代码后发现动态设置的样式并没有被加到设置的弹框的样式中，一直到今早突然恍然大悟，由于我设置弹框的显示和隐藏是用v-if控制的，v-if在网页加载的时候如果条件为false的话就不做任何操作，所以我动态加入的样式无法被成功插入到弹框里面，而另一种切换显示与不显示的方法的办法v-show则是在网页载入的时候不管true还是false都会载...
vue---vue指令之v-if和v-show
@微你
07-17 670
做一个心里只有目标和成绩的女孩子吧… ????：文章是供自己平时学习时用，相当于学习笔记，如有错误，欢迎指正，若有侵权，请联系我~~ vue指令—v-if和v-show 一、v-show 表示动态显示或隐藏节点，该指令用来动态控制DOM元素的显示或隐藏。语法如下： v-show="判断变量" 若判断变量为true,表示显示DOM节点， 若判断变量为false,表示隐藏DOM节点 二、v-if 表示动态创建和删除节点，该指令和v-show的用法相同。 v-if="判断变量" 若判断变量为true,表示创建
v-if和v-show区别
weixin_50304773的博客
09-15 161
v-if和v-show区别 相同点 都可以动态控制着dom元素的显示隐藏 区别 v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除; v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的 性能对比 v-if有更高的切换消耗； v-show有更高的初始渲染消耗 使用场景 v-if适合运营条件不大可能改变的场景下； v-show适合频繁切换； v-if: 在请求后台接口，用接口返回数据渲染生成多个元素的时候，由于网速
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值