Vue.js中的條件渲染

Question

我的應用程式循環遍歷蔬菜作物列表，並為每個作物顯示疾病鍵和控制措施的連結。

對於其中一個作物（cropid=6），沒有疾病鍵存在，我無法停止顯示該特定連結。

我的程式碼相關部分如下：

<v-container fluid grid-list-lg>
    <v-layout justify-center>
      <v-flex xs12>
        <h3>Diseases</h3>
        <v-card
          v-for="(disease,index) in diseases"
          :key="index"
          ripple
          class="hand"
          @click="navigateTo(disease.id)"
        >
          <v-container>
            <v-layout fill-height>
              <v-flex xs12 md8 lg6>
                <span v-html="$t(disease.link)"></span>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>

我的資料部分如下：

diseases: [
    { link: "disease key", id: "k", path: "key" },
    { link: "disease controls", id: "d", path: "control" },
  ],

如果cropID=6，我該如何停止顯示"disease key"連結？

謝謝/Tom

Answer 1

對於條件顯示，您需要使用 v-if。假設 disease.id 類似於 cropId，您可以使用下列程式碼：

var app = new Vue({
  el: '#app',
  data: {
    diseases: [{
        link: "disease key",
        id: "k",
        path: "key"
      },
      {
        link: "disease controls",
        id: "d",
        path: "control"
      },
    ]
  }
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
  <v-container fluid grid-list-lg>
    <v-layout justify-center>
      <v-flex xs12>
        <h3>Diseases</h3>
        <v-card v-for="(disease,index) in diseases" :key="index" ripple class="hand" @click="navigateTo(disease.id)">
          <v-container v-if="disease.id!='d'">
            <v-layout fill-height>
              <v-flex xs12 md8 lg6>
                <span v-html="disease.link"></span>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</div>