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可以做一些监控之类的效果。