Resuma alguns pontos de conhecimento do vue3: declaração condicional do Vue.js

Declaração condicional do Vue.js

julgamento condicional

v-se

O julgamento condicional usa a instrução v-if:

diretiva v-if

Use a diretiva v-if em elementos e modelos:

<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>

Aqui, a diretiva v-if decidirá se deve inserir o elemento p de acordo com o valor da expressão vista (verdadeiro ou falso).

Em modelos de string, como Handlebars, temos que escrever um bloco condicional como este:

<!-- Handlebars 模板 -->
{
   
   {#if ok}}
  <h1>Yes</h1>
{
   
   {/if}}

v-senão

Você pode adicionar um bloco "else" a um v-if com a diretiva v-else:

diretriz v-else

Gere um número aleatoriamente, julgue se ele é maior que 0,5 e, em seguida, gere as informações correspondentes:

<div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>
    
<script>
new Vue({
  el: '#app'
})
</script>

v-else-if

v-else-if foi adicionado em 2.1.0 e, como o nome sugere, é usado como o bloco else-if de v-if. Pode ser encadeado várias vezes:

diretriz v-else

Determine o valor da variável de tipo:

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

v-else, v-else-if deve seguir v-if ou v-else-if.

v-show

Também podemos usar a diretiva v-show para exibir elementos condicionalmente:

comando v-show

<h1 v-show="ok">Hello!</h1>