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

方法一：先上代码

     

        {{bicycle.title}}
      

             

        {{bicycle.title}}
       

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

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

 

        {{bicycle.title}}
     

//div里有  img的情况

        {{bicycle.power}}%
        {{distance}} 米
     

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

方法三：

        {{bicycle.title}}
           

.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'

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