Kemahiran penting untuk pemula untuk belajar Vue: kuasai v-if, v-show, v-else, v-else-if rendering bersyarat

Kemahiran penting untuk pemula untuk Vue: Kuasai v-if, v-show, v-else, v-else-if rendering bersyarat, contoh kod khusus diperlukan

Pengenalan:
Vue.js ialah front popular- rangka kerja JavaScript tamat yang menyediakan alat dan ciri yang berkuasa untuk membina antara muka pengguna interaktif. Dalam Vue, v-if, v-show, v-else dan v-else-if biasanya digunakan arahan pemaparan bersyarat yang membantu menunjukkan atau menyembunyikan elemen berdasarkan syarat tertentu. Dalam artikel ini, kami akan memperkenalkan penggunaan arahan ini dan membantu pemula memahami dan menguasai kemahiran ini melalui contoh kod khusus.

1. Arahan v-if
Arahan v-if ialah salah satu arahan pemaparan bersyarat yang paling biasa digunakan dalam Vue Ia menentukan sama ada untuk menghasilkan elemen berdasarkan nilai ungkapan yang diberikan. Jika ungkapan menilai kepada benar, elemen akan diberikan jika ia menilai kepada salah, elemen akan dialih keluar.

Berikut ialah contoh mudah yang menunjukkan penggunaan arahan v-if:

<template>
  <div>
    <p v-if="isShow">这是一个v-if指令的示例</p>
  </div>
</template>

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

Dalam kod di atas, kami telah menentukan atribut isShow dalam data dan menetapkan nilai awalnya kepada benar. Dalam templat, kami menggunakan arahan v-if untuk menentukan sama ada untuk memaparkan elemen <p></p>. Memandangkan nilai isShow adalah benar, elemen akan dipaparkan. <p></p>元素。由于isShow的值为true，所以该元素会被渲染。

二、v-show指令
v-show指令与v-if指令类似，也是根据给定的表达式的值来决定元素是否显示。不同的是，v-show指令会保留元素的DOM结构，只是通过CSS样式来控制元素的显示和隐藏。

下面是一个简单的示例，展示了v-show指令的用法：

<template>
  <div>
    <p v-show="isShow">这是一个v-show指令的示例</p>
  </div>
</template>

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

在上面的代码中，我们在data中定义了一个isShow属性，并将其初始值设置为true。在模板中，我们使用v-show指令来决定是否显示<p></p>元素。由于isShow的值为true，所以该元素会被显示。

三、v-else指令
v-else指令用于在上一个带v-if或v-else-if的元素后面添加一个“else”条件块。它没有表达式，只需在v-else中使用，表示不满足前面的条件时，渲染该元素。

下面是一个简单的示例，演示了v-else指令的用法：

<template>
  <div>
    <p v-if="isShow">这是一个v-if指令的示例</p>
    <p v-else>这是一个v-else指令的示例</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  }
}
</script>

在上面的代码中，我们根据isShow的值来决定显示哪个<p></p>元素。由于isShow的值为false，所以v-if条件不满足，将显示v-else指令后面的<p></p>元素。

四、v-else-if指令
v-else-if指令用于在v-if或v-else-if指令后面添加一个“else if”条件块。它接收一个表达式，并根据该表达式的值来判断是否渲染该元素。

下面是一个简单的示例，演示了v-else-if指令的用法：

<template>
  <div>
    <p v-if="type === 'info'">这是一个信息提示</p>
    <p v-else-if="type === 'warning'">这是一个警告提示</p>
    <p v-else-if="type === 'error'">这是一个错误提示</p>
    <p v-else>这是一个未知提示</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 'warning'
    }
  }
}
</script>

在上面的代码中，我们根据type的值来判断显示哪个<p></p>元素。由于type的值为'warning'，所以v-else-if指令中的条件被满足，将显示“这是一个警告提示”这个<p></p>

2. Arahan v-show

Arahan v-show adalah serupa dengan arahan v-if Ia juga menentukan sama ada elemen dipaparkan berdasarkan nilai ungkapan yang diberikan. Perbezaannya ialah arahan v-show mengekalkan struktur DOM elemen dan hanya mengawal paparan dan penyembunyian elemen melalui gaya CSS.

Berikut ialah contoh mudah yang menunjukkan penggunaan arahan v-show: 🎜rrreee🎜Dalam kod di atas, kami mentakrifkan atribut isShow dalam data dan menetapkan nilai awalnya kepada benar. Dalam templat, kami menggunakan arahan v-show untuk memutuskan sama ada untuk memaparkan elemen <p></p>. Memandangkan nilai isShow adalah benar, elemen akan dipaparkan. 🎜🎜3. Arahan v-else 🎜 Arahan v-else digunakan untuk menambah blok bersyarat "lain" selepas elemen sebelumnya dengan v-if atau v-else-if. Ia tidak mempunyai ungkapan dan hanya boleh digunakan dalam v-else untuk menunjukkan bahawa elemen akan diberikan apabila syarat sebelumnya tidak dipenuhi. 🎜🎜Berikut ialah contoh mudah yang menunjukkan penggunaan arahan v-else: 🎜rrreee🎜Dalam kod di atas, kami memutuskan elemen <p></p> yang hendak dipaparkan berdasarkan nilai isShow. Oleh kerana nilai isShow adalah palsu, syarat v-if tidak dipenuhi dan elemen <p></p> yang mengikuti arahan v-else akan dipaparkan. 🎜🎜4. Arahan v-else-if 🎜 Arahan v-else-if digunakan untuk menambah blok bersyarat "else if" selepas arahan v-if atau v-else-if. Ia menerima ungkapan dan menentukan sama ada untuk membuat elemen berdasarkan nilai ungkapan. 🎜🎜Berikut ialah contoh mudah yang menunjukkan penggunaan arahan v-else-if: 🎜rrreee🎜Dalam kod di atas, kami menentukan elemen <p></p> yang hendak dipaparkan berdasarkan nilai daripada jenis. Oleh kerana nilai jenis ialah 'amaran', syarat dalam arahan v-else-if dipenuhi dan elemen <p></p> "Ini ialah gesaan amaran" akan dipaparkan. 🎜🎜Ringkasan: 🎜v-if, v-show, v-else dan v-else-if adalah arahan pemaparan bersyarat yang biasa digunakan dalam Vue, yang melaluinya kita boleh menunjukkan atau menyembunyikan elemen secara dinamik. Dalam beberapa senario tertentu, kita boleh memilih arahan yang hendak digunakan berdasarkan syarat. Menguasai arahan ini adalah sangat penting untuk pembangun yang baru menggunakan Vue. Melalui contoh kod khusus dalam artikel ini, pemula boleh memahami dan menggunakan arahan ini dengan lebih jelas, sekali gus meningkatkan keupayaan pembangunan Vue mereka. 🎜

Atas ialah kandungan terperinci Kemahiran penting untuk pemula untuk belajar Vue: kuasai v-if, v-show, v-else, v-else-if rendering bersyarat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!