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

原

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

方法一：先上代码

      <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' " >
        {{bicycle.title}}
      </div>

//div里有  img的情况

<div :class="enableBicycle(bicycle) ? 'card-info' : 'card-infofalse'" >
        <img :src="enableBicycle(bicycle) ? '/static/icons/blueCall.png' : '/static/icons/grayCall.png'" height="10px"></img> {{bicycle.power}}%
        <img :src="enableBicycle(bicycle) ? '/static/icons/preload.png' : '/static/icons/load.png'" height="10px"></img> {{distance}} 米
      </div>

注意 这种方式 图片需放在static下   至于原因  初步理解是别的目录会被打包，打包后是不存在的。

方法三：<div class="card-title" :class="{'text-disable': !enabledBicycle}" >
        {{bicycle.title}}
           </div>

.text-disable {
    color: pink; 
  }

//div里有  img的情况

预先将图片以此类方式引入

 import powerIconEnable from 'assets/icons/blueCall.png'
  import powerIconDisable from 'assets/icons/grayCall.png'
  import distanceIconEnable from 'assets/icons/preload.png'
  import distanceIconDisable from 'assets/icons/load.png'
  import rentIconEnable from 'assets/icons/rentCarBlue.png'
  import rentIconDisable from 'assets/icons/rentCarGray.png'

<template>

<div class="card-Info" :class="{'text-disable': !enabledBicycle}">
        <img :src="powerIcon" height="10px"></img> {{bicycle.power}}%
        <img :src="distanceIcon" height="10px"></img> {{distance}} 米
      </div>

</template>

   js部分

 computed: {
      enabledBicycle () {
        return this.bicycle.state === 'ready' && this.bicycle.power > 20
      },
     
      powerIcon () {
        return this.enabledBicycle ? powerIconEnable : powerIconDisable
      },
      distanceIcon () {
        return this.enabledBicycle ? distanceIconEnable : distanceIconDisable
      },
      rentIcon () {
        return this.enabledBicycle ? rentIconEnable : rentIconDisable
      }
    }

简单介绍下计算属性

Vue中computed就是 实时计算 使用。
Vue检测到数据发生变动时就会执行对相应数据有引用的函数。
利用computed可以做一些监控之类的效果。