Teknologi praktikal Vue: kajian mendalam tentang v-if, v-show, v-else, v-else-if untuk melaksanakan pemaparan bersyarat dipacu data

Teknologi praktikal Vue: kajian mendalam tentang v-if, v-show, v-else, v-else-if untuk melaksanakan pemaparan bersyarat dipacu data# 🎜🎜## 🎜🎜#Pengenalan

Vue ialah rangka kerja bahagian hadapan yang berkuasa di mana arahan pemaparan bersyarat (v-if, v-show, v-else, v-else-if) boleh dipaparkan secara dinamik mengikut status data atau sembunyikan elemen. Dalam artikel ini, kami akan melihat secara mendalam arahan ini dan memberikan contoh kod konkrit untuk membantu pembaca memahami dan menggunakannya dengan lebih baik.

v-if arahan

v-if digunakan untuk menentukan sama ada untuk memaparkan elemen berdasarkan syarat. Apabila syarat adalah benar, elemen akan diberikan, jika tidak, ia tidak akan diberikan. Berikut ialah contoh khusus:

<template>
  <div>
    <p v-if="isUserLoggedIn">用户已登录</p>
    <p v-else>请先登录</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isUserLoggedIn: true
    }
  }
}
</script>

Dalam contoh di atas, berdasarkan nilai isUserLoggedIn, diputuskan sama ada untuk memaparkan "Pengguna telah log masuk" atau " Sila log masuk dahulu". Apabila isUserLoggedIn adalah benar, tunjukkan "Pengguna telah log masuk", jika tidak, jadikan "Sila log masuk dahulu".

v-show directive isUserLoggedIn 的值，决定是否渲染 "用户已登录" 或 "请先登录"。当 isUserLoggedIn 为 true 时，渲染 "用户已登录"，否则渲染 "请先登录"。

v-show 指令
v-show 指令与 v-if 类似，都是根据条件来展示或隐藏元素。但不同的是，v-show 不会真正地删除或添加 DOM 元素，而是通过修改元素的 CSS 属性 display 来控制元素的显示与隐藏。下面是一个具体的示例：

<template>
  <div>
    <p v-show="isUserLoggedIn">用户已登录</p>
    <p v-show="!isUserLoggedIn">请先登录</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isUserLoggedIn: true
    }
  }
}
</script>

在上述示例中，当 isUserLoggedIn 为 true 时，显示 "用户已登录"；当 isUserLoggedIn 为 false 时，显示 "请先登录"。通过修改元素的 display 属性来控制元素的显示与隐藏。

v-else、v-else-if 指令
有时候我们需要在多个条件中选择一个进行渲染，这时可以使用 v-else、v-else-if 指令。v-else 指令用于在 v-if 或 v-else-if 条件不满足时渲染元素，而 v-else-if 则用于在前一个 v-if 或 v-else-if 条件不满足时，判断下一个条件是否满足。下面是一个具体的示例：

<template>
  <div>
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 85
    }
  }
}
</script>

在上述示例中，通过判断 score 的值，渲染不同的评级。如果 score 大于等于 90，则渲染 "优秀"；如果 score Arahan v-show adalah serupa dengan v-if kerana ia memaparkan atau menyembunyikan elemen berdasarkan syarat. Tetapi perbezaannya ialah v-show sebenarnya tidak memadam atau menambah elemen DOM, tetapi mengawal paparan dan penyembunyian elemen dengan mengubah suai atribut CSS elemen display. Berikut ialah contoh khusus:

rrreee

Dalam contoh di atas, apabila isUserLoggedIn adalah benar, "Pengguna telah log masuk" dipaparkan apabila isUserLoggedIn; kod> Apabila ia palsu, "Sila log masuk dahulu" dipaparkan. Kawal paparan dan penyembunyian elemen dengan mengubah suai atribut <code>display elemen.

v-else, v-else-if arahan

Kadang-kadang kita perlu memilih satu daripada berbilang syarat untuk rendering, kemudian kita boleh menggunakan arahan v-else, v-else-if . Arahan v-else digunakan untuk membuat elemen apabila keadaan v-if atau v-else-if tidak dipenuhi, manakala v-else-if digunakan untuk menentukan apabila keadaan v-if atau v-else-if sebelumnya adalah tidak dipenuhi. Berikut ialah contoh khusus:

rrreee#🎜🎜#Dalam contoh di atas, penilaian berbeza diberikan dengan menilai nilai skor. Jika skor lebih besar daripada atau sama dengan 90, jadikan "Cemerlang"; jika skor lebih besar daripada atau sama dengan 60, jadikan "Lulus"; #🎜🎜##🎜🎜#Ringkasan#🎜🎜#Melalui kajian mendalam tentang arahan v-if, v-show, v-else, v-else-if, digabungkan dengan contoh kod khusus, kami belajar cara menggunakan ini Arahan untuk melaksanakan pemaparan bersyarat dipacu data. Dalam pembangunan sebenar, mengikut keperluan dan senario yang berbeza, kami boleh memilih secara fleksibel untuk menggunakan arahan ini untuk mengawal paparan dan penyembunyian elemen halaman, dengan itu meningkatkan pengalaman pengguna. #🎜🎜##🎜🎜# Saya harap artikel ini dapat membantu pembaca menguasai dengan lebih baik kemahiran pemaparan bersyarat dalam Vue dan meningkatkan lagi keupayaan pembangunan bahagian hadapan. #🎜🎜#

Atas ialah kandungan terperinci Teknologi praktikal Vue: kajian mendalam tentang v-if, v-show, v-else, v-else-if untuk melaksanakan pemaparan bersyarat dipacu data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!