vue 三元表达式class、图片切换 （涉及计算属性）

最新推荐文章于 2024-08-15 11:11:39 发布
最新推荐文章于 2024-08-15 11:11:39 发布
阅读量2.3w 收藏 2
点赞数
分类专栏： vue vue历程 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29220231/article/details/53939755
版权
本文介绍了在Vue中利用计算属性实现条件性切换`class`和图片的方法，包括直接使用三元运算符、定义样式类和通过计算属性动态设置图片源。方法三通过计算属性优化了代码，减少了冗余，同时提到了图片路径的注意事项。
摘要由CSDN通过智能技术生成


方法一：先上代码

      <div class="card-titlefalse" v-if="!enableBicycle(bicycle)">
        { {bicycle.title}}
       </div>

             <div class="card-title" v-if="enableBicycle(bicycle)">

        { {bicycle.title}}
        </div>

浅显易懂 ，却有代码冗余之嫌；

方法二： //class自行选择切换 如果enableBicycle(bicycle) 为真  class为'card-title‘ 否则为card-titlefalse

 <div :class="enableBicycle(bicycle) ? 'card-title' : 'card-titlefalse' " >
       

最低0.47元/天 解锁文章
向太阳天
关注
专栏目录
javascript中用三元运算符实现手动图片转换
weixin_45147894的博客
05-22 1828
主要思想为： 一：布局HTML部分主要是img图片和两个按钮（next和prev）, <img id="image" src="image/1.jpg" /> <button id="next" style="size:12px" onClick="nn()">next</button> <button id="prev" style="size:12px" onClick="pp()">prev</button> 二：js部分主要是利用变.
vue class 三元表达式_13个技巧让你的 vue.js 代码更优雅
weixin_39989939的博客
11-27 1039
前言?作为深度代码洁癖，我们都希望能写出简单高效的代码，让我们的代码看起来更加优雅，让我们抛弃繁杂的代码，一起开启简单的旅程~~$on(‘hook:’) 可以帮助你简化代码mounted(){window.addEventListener('resize',this.resizeHandler);this.$on("hook:beforeDestroy",()=&gt...
vue 根据数组状态值判断显示不同class
最新发布
hong
08-15 247
写vue的时候遇到一个需求 ， 根据数组某项的状态来判断显示不同class ， 其实用v-if ， v-else也可以解决 ，但是想偷懒少写几句代码 ，一样的小伙伴可以参考下。
vue 三元表达式
qq_24010663的专栏
12-17 1万+
1、数组形式 <div :class='["classify",current=="0" ? "active" : ""]' @click='current=0'> `课程 ` 注意：数组中的classify如果不加引号的话，代表的是data中的一项，并不是类名，将classify加上双引号，变成字符串就可以变成类名 2、字符串拼接 <div :class="'classify'...
vue 三元表达式动态绑定class
祖先生的博客
09-09 1万+
vue使用三元表达式绑定class <div :class="[isActive ? 'active' :'']"> 测试 </div> <script> export default { data () { return { isActive: true } } } </script> <style scoped> .active { font-size: 16px; } .normol { .
vue.js中内联样式style、class三元表达式
热门推荐
人间草木
01-28 3万+
:style 是v-bind:style的简写 v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute） style三元表达式 <p :style="{'color': (checkIndex3==m.txt ? '#3d8cff':'#BBBBBB')}">{{m.txt}}</p> c...
vue中使用三元表达式实现类名的切换
weixin_43709908的博客
12-10 2978
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
如何在vue行内使用三元表达式
weixin_52921550的博客
03-29 3109
格式 color是要添加的css样式，当status值为true时文字的颜色就为蓝色，当status值为false时文字颜色为红色 <text :style="{'color':status === true ? 'blue':'red'}">按钮</text> 也可以使用这个办法进行绑定css <div id="containes" style="width:100%; height:100%" :class="[cursor ? 'cursorCrosshair' : '
vue class 三元表达式
08-19
在Vue中，可以使用三元表达式来判断是否显示某个类名。使用的语法是:class="'固定类名 ' (动态类名的三元表达式)"。注意，在固定类名的后面要加一个空格。另外，需要在冒号前加上一个引号，并且在引号的使用上，外双...
Vue 样式切换及三元判断样式关联操作
12-28
假设有需求： 后台返回状态1:启用，0：禁用 1、若要使启用为绿色，禁用不添加其他样式 ... <div class={active:scope.row.status> {{ scope.row.statusName }} .active{ color:green; } 1、若要使启用为
vue 属性 三元表达式
qq_36016297的博客
03-30 5223
在 Vue.js 中，可以使用三元表达式（ternary operator）来根据某个条件动态地设置属性值。同样的，也可以根据条件来动态地设置其他属性，例如。属性时，需要传入一个对象，而不是一个字符串。，我们可以根据它的值来动态地设置。例如，假设有一个布尔类型的数据。是条件为真时要设置的属性值，是条件为假时要设置的属性值。表示要设置的属性名，
vue中 :style 与 :class 三元运算符使用
蓝胖子的博客
03-11 2035
vue中 :style 与 :class 三元运算符使用
07 Vue3中的三元表达式
Python私教
12-21 1369
三元表达式时JavaScript中比较常用的一种原生语法，能够在一行代码中实现if-else的分支逻辑。在Vue的双大括号中，我们也可以使用三元表达式去实现一些简单的条件渲染。
vue使用三元表达式设置style，class
也简的博客
07-19 1万+
vue三元表达式动态设置style、class；vue中：style与：class三元运算符使⽤style三元表达式
vue 中cclass得三元运算
sunlizhen的专栏
10-23 382
<s :class="item.risk=='断电'?'hongse':'luese'">{{item.state}}</s> <s :class="item.risk=='断电'?'hongse':item.risk=='断电或限流'?'huanse':'luese'">{{item.state}}</s>
vue class style 三元运算
weixin_44237303的博客
01-12 183
vue class style 三元运算
2022-06-13 工作记录--Vue-多个class的三元表达式写法
weixin_48850734的博客
06-22 7369
Vue-多个class的三元表达式写法
vue使用三元表达式动态设置style样式和class
锦瑟年华L的博客
05-08 1357
vue使用三元表达式动态设置style样式和class
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值