海创软件组-2020913-vue的注意小知识点

怎么让底部组件有时候显示有时候隐藏

例如这个界面的底部，在外卖、搜索、订单、我的这四个路由的时候是显示的，但是当跳转到登录/注册页面的时候就隐藏起来

此时可以应用注册路由的一个属性meta

星星商品评价

首先要找到三种图片，全亮的星星，半星，灰色的星星
抽出成一个组件，让有需要的地方可以引用

并且在父组件引入的时候需要将评分传给star组件

定义一个数组来接收要使用什么样子的星星，之后在span中循环出来，并且设置什么属性的使用什么样子的星星
而且需要知道多少评分需要设置什么样的星星
例如： 3.2: 3（全） + 0（半） + 2(灰)
3.5: 3 + 1 + 1
接收父组件的score
定义一个方法starClasses ()
整数scoreInt部分就是多少个全星，如果score-scoreInt>0.5那么就是一个全星，之后使用while（n<5）将灰色的星星循环出来，在computed中计算这个方法
完整代码

<template>
  <div class="star" :class="'star-'+size">
    <span class="star-item" v-for="(sc, index) in starClasses" :class="sc" :key="index"></span>
  </div>
</template>

<script>
  // 类名常量
  const CLASS_ON = 'on'
  const CLASS_HALF = 'half'
  const CLASS_OFF = 'off'

  export default {
    props: {
      score: Number,
      size: Number
    },

    computed: {
      /*
      3.2: 3 + 0 + 2
      3.5: 3 + 1 + 1
       */
      starClasses () {
        const {score} = this
        const scs = []
        // 向scs中添加n个CLASS_ON
        const scoreInteger = Math.floor(score)
        for (let i = 0; i < scoreInteger; i++) {
          scs.push(CLASS_ON)
        }
        // 向scs中添加0/1个CLASS_HALF
        if(score*10-scoreInteger*10>=5) {
          scs.push(CLASS_HALF)
        }
        // 向scs中添加n个CLASS_OFF
        while(scs.length<5) {
          scs.push(CLASS_OFF)
        }

        return scs
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixins.styl"
  .star //2x图 3x图
    float left
    font-size 0
    .star-item
      display inline-block
      background-repeat no-repeat
    &.star-48
      .star-item
        width 20px
        height 20px
        margin-right 22px
        background-size 20px 20px
        &:last-child
          margin-right: 0
        &.on
          bg-image('./images/star48_on')
        &.half
          bg-image('./images/star48_half')
        &.off
          bg-image('./images/star48_off')
    &.star-36
      .star-item
        width 15px
        height 15px
        margin-right 6px
        background-size 15px 15px
        &:last-child
          margin-right 0
        &.on
          bg-image('./images/star36_on')
        &.half
          bg-image('./images/star36_half')
        &.off
          bg-image('./images/star36_off')
    &.star-24
      .star-item
        width 10px
        height 10px
        margin-right 3px
        background-size 10px 10px
        &:last-child
          margin-right 0
        &.on
          bg-image('./images/star24_on')
        &.half
          bg-image('./images/star24_half')
        &.off
          bg-image('./images/star24_off')
</style>

重要思想三目运算符（手机号验证如果变成倒计时）

在写vue的时候用三目运算符可以解决很多问题

设置一个属性phoneRight,当手机号验证正确之后phoneRight为true，不正确的时候一直为false设置获取验证码的字体颜色为灰色，并且点击后出现倒计时，此时就是在获取验证码的button设置一个属性phoneRight，使用三目运算符，conputedTime>0?已发送${conputedTime}s:‘获取验证码’

//在methods中
getCode () {
        // 如果当前没有计时
        if(!this.computeTime) {
          // 启动倒计时
          this.computeTime = 30
          this.intervalId = setInterval(() => {
            this.computeTime--
            if(this.computeTime<=0) {
              // 停止计时
              clearInterval(this.intervalId)
            }
          }, 1000)
          }

界面更新完成之后自定义调用

watch: {
//调用这个方法
this.$nextTick(() => {

}）
}