涨芝士:三元运算符里嵌套三元运算符与Vue的template里调用methods的方法

最新推荐文章于 2023-08-02 13:50:20 发布
最新推荐文章于 2023-08-02 13:50:20 发布
阅读量1.9k 收藏 1
点赞数 1
分类专栏： 项目开发历程 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/like_js/article/details/112235253
版权

背景前提:
某个需求优化,用户头像要做逻辑判断,后端接口返回两个字段,一个字段是userImage(用户自己上传的头像),
另一个是sexImage(性别头像:男和女)

逻辑一: 若userImage有值就直接显示 userImage:‘xxxxx’ 的头像,后面的性别头像就不管了

逻辑二: 前面的 userImage:“ ” ,就取性别头像, sexImage:“man” (男生头像), sexImage：“woman” (女生头像)

逻辑三: 若 usrImage:" " 和 sexImage:" " 都为空的,就取自定义的默认头像 defaultImage

这个时候就会用到标题里所说的了

三元运算符方案

template代码

<!-- user-info为子组件 -->
 <user-info :imgUrl="reaData.userImage?reaData.userImage:(reaData.sexImage === 'man'?manImg:reaData.sexImage === 'woman'?womanImg:defaultImg)">
 </user-info>

s

最低0.47元/天 解锁文章
我仰泳一级棒
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
1.三元表达式的嵌套使用
weixin_42043532的博客
11-16 1480
三元表达式的嵌套使用 在vue项目中,动态绑定class或style时,常常会用到三元表达式。 三元表达式的普通用法：a = 条件？值1：值2 三元表达式的嵌套用法：a = 条件1？值1 : (条件2？值2 : 条件3？值3：值4) 嵌套写法相当于： if (条件1) {     a = 值1； }else if (条件2){     a = 值2； }else if (条件3){    &nbs
三元表达式嵌套，三元运算符嵌套
zxljsbk的博客
11-29 4696
基本公式： a>b?0:1 --如果a>b,则返回0，否则返回1 i=a>b?0:1 --如果a>b,则i=0，否则i=1 三元表达式嵌套： a>b?0:(c>d?1:2) --如果a>b，则返回0； --如果a<b且c>d，则返回1； ...
三元运算符嵌套
lajiwuhu的博客
04-28 74
let a=23:a==2?2:1。
vue 差值表达式中使用三元表达式
许洪源的博客
01-05 6485
vue的插值表达式 {{}} 有人叫小胡子语法，也叫双花括号 作用：读取vue中data里的数据，显示在结构中，数据更新，视图也会跟着变化。 vue 差值表达式中使用三元表达式 <span>总开机时间：{{ status.bootTime == null ? 'N/A' : status.bootTime}}</span> data() { return { status:{ bootTime:'' }, }; }
vue三元表达式 多条件嵌套
m0_61482364的博客
02-10 705
vue三元表达式 多条件嵌套
vue中实现在外部调用methods的方法(推荐)
08-28
Vue 中实现外部调用 methods 的方法 在 Vue 中，经常会遇到需要在外部调用组件中的方法的情况，例如需要在 Java 后台的弹窗页面中调用 Vue 组件中的方法。为此，我们需要找到一种方式将组件中的方法传递到外部，使...
解决Vue watch里调用方法的坑
01-18
这里是说watch调用methods里方法的时候，页面经常会报找不到方法 这个时候一定要在watch里去输出一下this， 看看this包裹的壳是不是多了好多层，所以找不到方法，虽然我到现在还没理解为啥有时候会出现一层或几层壳...
对vue中methods互相调用的方法详解
12-08
最近在学习vue，并用vue+vue-router+axios+elementUI做了一个pos收银系统的前端页面，但是中间遇到methods里的方法调用问题。本身源码是没有调用的，但是我想直接调用多方便，结果出错了……然后百度了一波，终于...
vue中实现methods一个方法调用另外一个方法
11-26
methods中的一个方法调用methods中的另外一个方法 可以在调用的时候 this.$options.methods.test2(); this.$options.methods.test2();一个方法调用另外一个方法； new Vue({ el: '#app', data: { test:111, },...
vue的三元运算符运行方法
m0_64531353的博客
02-24 1281
<i :style="{'background-color':index ===0 ? 'red' :index ===1 ? 'orangered' : index === 2 ? 'orange' : 'rgb(196, 195, 195)'}">
vue方法里面怎么写三目运算符_Vue中涉及到的三目运算与v-if结合
weixin_39729262的博客
12-18 3722
一.问题11.需求：最近在用Vue写后台，其中有个需求被广泛使用：点击签收，立即变成 节点办理|办结2.解决办法：思路;在 节点办理|办结 两个button按钮上绑定v-if的三目运算，当点击签收，签收状态改变，刷新页面，v-if的条件执行，显示节点办理|办结使用的是elementUI的table组件，根据组件的api,点击签收按钮，传递当前这行的数据，能够得到签收状态的值，在...
Vue全局过滤器的使用以及在template三元运算符中内使用过滤
几百块的博客
06-25 1639
Vue全局过滤器的使用 新建filters.js如下，内容过滤可以自己写函数，记得export 导出 import dayjs from "dayjs"; // 转小写 let lower = value => value.toLowerCase(); // 转大写 let upper = value => value.toUpperCase(); let currencyStyle = (value, style) => { // 货币格式 /** * style:
vue中使用3元运算符
Leijiang0504的博客
04-15 1383
很简单，就这样在那样就可以了 :class="[item.flog==true?'arrow_right top':'arrow_bottom top']"
vue 在 html标签上 做三元运算
weixin_44872023的博客
12-24 7878
众所周知，在js 中 a<b?‘方法一’:‘方法二’ 这种 三元运算 是比较方便快捷，那么如何在html标签上直接使用呢？ 在 标签包裹中，一半为内容，可以直接使用 例如： <p class="price">{{price>100?'涨价了':'降价了'}}</p> 在 标签内，如 class、style、data- 等等 都需要简单处理 例如： <template v-for="(item,index) in selcoursesList"> &lt
vue绑定事件时候使用三元表达式
神zhi殇的博客
08-02 454
如果使用三元表达式，方法要加括号，如果不使用三元表达式，方法则可以不加括号。
vue基础2
enginebrkalsy的博客
04-21 780
上节复习 随着flag旗子true/false变颜色： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
VUE3 之 template 语法
追风人的博客
12-15 6813
目录 1. 概述 2.template 语法 3. 综述 4. 个人公众号 1. 概述 老话说的好：干一行，爱一行，踏实工作才是真正快乐的源泉。 言归正传，今天继续聊 VUE3 的话题，今天聊聊template 语法。 闲话不多说，直接上代码。 2.template 语法 2.1 与数据绑定 <script src="../vue.global.js"></script> </head> <body> <di...
Vue 动态 template 模版调用 methods 方法
票票的博客
10-15 9528
<template> <p>{{ fn(val) }}</p> </template> methods: { fn: function (val) { if (val) reutrn val.id } }
多个三元的嵌套
c_s_d_na的博客
03-26 2104
三元表达式的嵌套使用 在vue项目中,动态绑定class或style时,常常会用到三元表达式。 三元表达式的普通用法：a = 条件？值1：值2 三元表达式的嵌套用法：a = 条件1？值1 : (条件2？值2 : 条件3？值3：值4) 嵌套写法相当于： if (条件1) { a = 值1； }else if (条件2){ a = 值2； }else if (条件3){ a = 值3； }else { a = 值4； } 最近在一个vue项目中要实现这样的一个效果 ...
vue中:class 三元运算符使用
最新发布
05-17
在 Vue 中，我们可以使用 `:class` 来动态绑定 class。同时，为了实现更加灵活的样式控制，还可以使用三元运算符来根据不同的情况设置不同的 class。 :class 三元运算符的语法格式如下： ``` :class="{'class1': condition1, 'class2': condition2}" ``` 其中，`class1` 和 `class2` 是样式类名，`condition1` 和 `condition2` 是判断条件。当条件成立时，对应的样式类名会被应用到元素上，否则不会应用该样式。 示例代码如下： ```html <template> <div :class="{'active': isActive, 'error': isError}">Vue is awesome!</div> </template> <script> export default { data() { return { isActive: true, isError: false } } } </script> ``` 在上面的示例中，当 `isActive` 为 `true` 时，元素会应用 `active` 样式类；当 `isError` 为 `true` 时，元素会应用 `error` 样式类。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值