Обобщите некоторые знания о vue3: условное выражение Vue.js

Условный оператор Vue.js

условное решение

v-если

Условное суждение использует инструкцию v-if:

v-если директива

Используйте директиву v-if в элементах и ​​шаблонах:

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

Здесь директива v-if будет решать, вставлять ли элемент p в соответствии со значением увиденного выражения (true или false).

В строковых шаблонах, таких как Handlebars, мы должны написать условный блок следующим образом:

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

v-иначе

Вы можете добавить блок «else» в v-if с помощью директивы v-else:

директива v-else

Случайным образом сгенерируйте число, оцените, больше ли оно 0,5, а затем выведите соответствующую информацию:

<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-иначе-если

v-else-if был добавлен в версии 2.1.0 и, как следует из названия, используется как блок else-if в v-if. Можно связать несколько раз:

директива v-else

Определяем значение переменной типа:

<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 должны следовать за v-if или v-else-if.

v-шоу

Мы также можем использовать директиву v-show для условного отображения элементов:

команда v-show

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