Question

所以我对学习Vue.js比较陌生。到目前为止我已经理解了大部分内容，但是如果从不工作的话，我仍然遇到问题。例如......

我希望这些不会显示，因为showProgress是假的！

<template v-if="showProgress">
  <div id="progressCols" class="md-layout">
    <div class="md-layout-item" :class="[{ activeStep: currentStep(1) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(2) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(3) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(4) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(5) }, '.md-elevation-1']"></div>
    {{ showProgress }}
  </div>
</template>

<script>
  export default {
    name: 'ProgressCols',
    data: function(){
      return {
        showProgress: false 
      }
    },
    methods: {
      currentStep(i){
        let n = 0;
        if (this.$route.params.name == "Ailments") {
          n =  1; 
        } else if (this.$route.params.name == "Effects") {
          n =  2; 
        }

        i < n ? true : false
      }
    }
  }
</script>

Answer 1

v-if应位于最外层div，而不是template。

<template>
  <div id="progressCols" class="md-layout" v-if="showProgess">
    <div class="md-layout-item" :class="[{ activeStep: currentStep(1) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(2) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(3) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(4) }, '.md-elevation-1']"></div>
    <div class="md-layout-item" :class="[{ activeStep: currentStep(5) }, '.md-elevation-1']"></div>
    {{ showProgress }}
  </div>
</template>

<script>

  export default {
    name: 'ProgressCols',
    data: function(){
      return {
        showProgress: false 
      }
    },
    methods: {
      currentStep(i){
        let n = 0;
        if (this.$route.params.name == "Ailments") {
          n =  1; 
        } else if (this.$route.params.name == "Effects") {
          n =  2; 
        }

        i < n ? true : false
      }
    }
  }

</script>

如果模板上没有v-else，它就不知道错误时要呈现的内容。

v-如果不在模板上工作

1 个答案: