vue中巧用三元表达式解析

目录
  • 如何巧用三元表达式
    • 三元表达式的巧妙使用
  • :class=“ “的三元表达式写法

如何巧用三元表达式

一开始我并不喜欢阅读别人的代码，话说程序员最讨厌的事：写代码要写文档、写代码要写注释、别人的代码没有文档、别人的代码没有注释。后来发现阅读别人的代码虽然很枯燥，但是很锻炼逻辑思维，而且还能学到很多东西，比如我下面要说的这个：

三元表达式的巧妙使用

在某天（其实具体是哪天我也忘了），我在阅读别人的代码时发现一串三元表达式，感觉很6，像是打开新世界的大门一样，顿时感觉只有你想不到的，没有别人做不到的。真的是活到老学到死啊。

下面上代码：

<span
      v-for="$index in circles"
      class="circle"
      :style="{
        backgroundColor: activeIndex == $index ? pagerColor : pagerBgColor,
        opacity:
          pagerColor == pagerBgColor
            ? activeIndex == $index
              ? '1'
              : '0.4'
            : '1'
      }"
      :key="$index"
    ></span>

这代码扫一眼看着没毛病啊，就是遍历渲染数据，但是其中三元表达式的使用真的是6到飞起。可能有些大佬一看，有点鄙视我，“垃圾，就一个三元表达式，大惊小怪”，但是我是头一次看到这么写的。其实好多东西不是不会写，而是想不到。就像这个三元表达式，让谁写谁都能写出来，但是就是想不到可以这么写。这也是阅读别人代码的一个好处，可以学到一些骚操作，让自己少写代码，提高工作效率。

回头再说这个三元表达式，我们正常使用三元表达式是这样的：

表达式 (expr1) ? (expr2) : (expr3)

在 expr1 求值为 TRUE 时的值为 expr2，在 expr1 求值为 FALSE 时的值为 expr3。

而上面代码中把表达式中的值又设为一个表达式，满足条件的时候执行表达式再次判断求值，将三元表达式写成了类似于if判断的东西，减少了代码量而且还增加更加容易读懂

:class=“ “的三元表达式写法

<div class="stepbar">
   <div class="stepbar-first"></div>
   <div class="stepbar-first-line"></div>
   <div v-if="item.applyState===5" class="stepbar-gray"></div>
   <div v-else :class="item.applyState===1?'stepbar-red':'stepbar-first'"></div>
   <div v-if="item.applyState!==1&&item.applyState!==5" class="stepbar-first-line"></div>
   <div v-if="item.applyState!==1&&item.applyState!==4&&item.applyState!==5" :class="item.applyState===2&&item.applyState!==3?'stepbar-red':'stepbar-first'"></div>
   <div v-if="item.applyState===4" class="stepbar-gray"></div>
 </div>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue基础语法之插值表达式详解

    vue基础语法之插值表达式详解

    目录 一.vscode插件介绍 二.插值表达式介绍 三.插值表达式示例1 四.插值表达式示例2 五.插值表达式注意点 六.插值表达式补充 总结 一.vscode插件介绍 在我们演示插值表达式之前,我们先安装这一个VScode给我们提供的插件,它可以将我们书写好的网页通过服务端口的方式进行访问,同时它的好处还有:再修改代码后,不需要我们手动点击刷新,插件会帮我们自动进行刷新,是不是非常方便,提高了我们的开发效率,节省了我们每次修改代码都要点击一次刷新的操作. 安装步骤如下图所示:安装Live Se

  • Vue 样式切换及三元判断样式关联操作

    假设有需求: 后台返回状态1:启用,0:禁用 1.若要使启用为绿色,禁用不添加其他样式 <el-table-column prop="statusName" align="center" label="状态"> <template slot-scope="scope"> <div :class="{active:scope.row.status==1}"> {{ scop

  • vue动态绑定多个class以及带上三元运算或其他条件

    目录 动态绑定多个class带上三元运算或其他条件 动态绑定属性 例子 实现 一个标签中含有多个class(其中包含三元表达式)的写法 1.数组形式 2.字符串拼接 动态绑定多个class带上三元运算或其他条件 动态绑定属性 在v-for循环中,根据需求,在10条数据里,前3条添加不一样的样式. 例子 设置第一条数据的样式为one <li v-for="(item,index) in items" :key="index">     <span :

  • vue中巧用三元表达式解析

    vue中巧用三元表达式解析

    目录 如何巧用三元表达式 三元表达式的巧妙使用 :class=“ “的三元表达式写法 如何巧用三元表达式 一开始我并不喜欢阅读别人的代码,话说程序员最讨厌的事:写代码要写文档.写代码要写注释.别人的代码没有文档.别人的代码没有注释.后来发现阅读别人的代码虽然很枯燥,但是很锻炼逻辑思维,而且还能学到很多东西,比如我下面要说的这个: 三元表达式的巧妙使用 在某天(其实具体是哪天我也忘了),我在阅读别人的代码时发现一串三元表达式,感觉很6,像是打开新世界的大门一样,顿时感觉只有你想不到的,没有别人做不

  • VUE中的无限循环代码解析

    VUE中的无限循环代码解析

    代码如下所示: <template> <div id=""> <ul v-for="(item,index) in listaaa"> <li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li> </ul> </div> </template> <script> export default { name:

  • Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法

    在开发过程中经常会发现当页面明明不应该出现的元素或内容会闪现一下然后消失,最近研究了一下这个问题的原因和解决办法,这里和大家分享一下. 1.闪现的原因 这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译,所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况.因为在这些判断条件或表达式执行之前,DOM已经渲染出来了,之后Vue才会执行相应的JS代码. 2.解决的办法 其实在了解了原因之后我们就有了大概的思路,既然是在JS执行之前会出

  • Vue中$nextTick实现源码解析

    Vue中$nextTick实现源码解析

    目录 正文 先看一个简单的问题 内部实现 先看第一块: 再看第二块: 然后是第三块: 最后是第四块: 正文 先看一个简单的问题 <template> <div @click="handleClick" ref="div">{{ text }}</div </template> <script> export default { data() { return { text: 'old' } }, methods:

  • vue中window.onresize的使用解析

    目录 window.onresize的使用 说下重点 window.onresize笔记 1.浏览器尺寸变化响应事件 2.谷歌浏览器中 3.页面尺寸变更事件 window.onresize的使用 说下重点 window.onresize只能在一个组件中使用,如果多个组件调用则会出现覆盖情况,所以我的解决方案是在App.vue中使用,获取document.documentElement.clientWidth(即浏览器宽度)存放在vuex中,别的组件只需要用computed(计算属性)将vuex的

  • vue中手动封装iconfont组件解析(三种引用方式的封装和使用)

    vue中手动封装iconfont组件解析(三种引用方式的封装和使用)

    目录 准备 封装 unicode引用封装 font-class引用封装 symbol引用封装 引入 全局引入 局部引入 使用 在线使用 有时候会因网络问题影响用户体验:直接放在 本地使用 ,如果过多使用也会显得繁琐,所以就可以将其封装成一个组件,也方便维护.​ 封装基于阿里巴巴图标库的项目图标. 准备 将项目内的图标下载至本地 在了路径 src/assets 下新建文件夹 iconfont ,用来存放字体图标的本地文件 解压下载到本地的字体图标文件,放到 iconfont 文件夹下 如过项目中没

  • vue中的总线机制(EventBus)解析

    目录 一.EventBus的简介 二.使用方法 第一步:2种方式初始化 第二步:发送事件 第三步:接受事件 第四步:移除事件 三.全局EventBus 1.注册,在main.js中 2.在组件中使用 四.EventBus的优缺点 一.EventBus的简介 EventBus 又称时间总线 ,理解上来讲 EventBus 机制是通知的概念,EventBus作为所有组件共享的事件中心,既可以发送事件也可以接受事件,所有组件都可以平行的接到到相对应的数据. 二.使用方法 第一步:2种方式初始化 在项目

  • Vue中的计算属性与监听属性

    Vue中的计算属性与监听属性

    目录 一.为什么要使用计算属性 什么是计算属性 二.计算属性和方法的区别 1.区别 2.计算属性使用场景 三.修改计算属性的值 总结 四.监听属性 1.监听普通属性 2.监听属性和计算属性的区别 3.监听复杂对象 一.为什么要使用计算属性 什么是计算属性 计算属性:可以理解为能够在里面写一些计算逻辑的属性.具有如下的作用: 减少模板中的计算逻辑. 数据缓存.当我们的数据没有变化的时候,不会再次执行计算的过程. 依赖固定的数据类型(响应式数据),不能是普通的传入的一个全局数据. 在数据量比较大的时

  • 全面解析vue中的数据双向绑定

    1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的getter,和setter.这也正是Vue不兼容IE8以下的原因. 2.Object.defineProerty(); var obj = {}; Object.defineProperty(obj,"hello",{ enumerable: true, //表示这个属性能够通过 for -- in 循环 (是否可枚举); configurable

  • python中 ? : 三元表达式的使用介绍

    (1) variable = a if exper else b(2)variable = (exper and [b] or [c])[0](2) variable = exper and b or c 上面三种用法都可以达到目的,类似C语言中 variable = exper ? b : c;即:如果exper表达式的值为true则variable = b,否则,variable = c 例如: 复制代码 代码如下: a,b=1,2max = (a if a > b else b)max =

随机推荐