Penjelasan terperinci tentang arahan pemaparan bersyarat Vue: v-if dan v-show

Dalam Vue, kita boleh menggunakan v-if dan v-show untuk mengawal pemaparan elemen atau templat. Dan v-if dan v-show juga merupakan arahan dalaman yang biasa digunakan dalam Vue. Arahan yang disebut di sini ialah directive, yang merujuk kepada perintah khas dengan awalan v- Nilai arahan adalah terhad kepada ungkapan mengikat Tanggungjawab arahan adalah untuk menggunakan tingkah laku khas tertentu apabila nilai ekspresi berubah kepada DOM. Dua arahan

v-if dan v-show ialah perkara yang sering dipanggil oleh semua orang sebagai arahan pemaparan bersyarat. (Belajar perkongsian video: tutorial video vue)

v-if : Arahan cawangan bersyarat

---

Mari kita lihat dahuluv-if arahan. Fungsinya adalah untuk menjana atau mengalih keluar elemen (atau berbilang elemen) dalam DOM berdasarkan nilai ungkapan true atau false. Ia agak serupa dengan if pertimbangan bersyarat dalam JavaScript. Selain v-if, terdapat juga v-else-if dan v-else dalam Vue.

v-if

Seperti yang dinyatakan sebelum ini, v-if menentukan sama ada untuk menjana elemen dalam DOM berdasarkan nilai ungkapan. Contohnya:

<!-- template -->
<div id="app">
    <h1 v-if="true">v-if的值为true时，显示这个div元素</h1>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {

    }
})

Pada masa ini, elemen <h1> dimasukkan ke dalam elemen div#app dan diberikan:

dalam Vue , jika anda perlu menentukan sama ada elemen dipaparkan, tambahkan arahan v-if pada elemen dan tetapkan nilainya kepada true atau false. Sebagai contoh, dalam contoh di atas, kami tetapkan true dan elemen itu diberikan. Jika nilai true di atas digantikan dengan false, elemen <h1> tidak akan dipaparkan.

Selain menetapkan terus v-if atau true kepada false, anda juga boleh membuat pertimbangan melalui ungkapan. Contohnya:

<!-- template -->
<div id="app">
    <h1 v-if="isShow">
    v-if的值为true时，显示这个div元素
    </h1>
</div>
// JavaScript
    var app = new Vue({
    el: '#app',
    data: { isShow: true }
})

Dalam contoh di atas, nilai isShow diisytiharkan sebagai true, dan kemudian dalam elemen h1, arahan v-if digunakan untuk mengikat isShow. Sebenarnya serupa dengan v-if="true". Elemen h1 juga dipaparkan secara normal:

Apabila anda menetapkan isShow kepada false, elemen h1 tidak akan dipaparkan.

Apa yang kita lihat di atas ialah memaparkan satu elemen Jika anda ingin memaparkan berbilang elemen, adakah anda perlu meletakkan berbilang elemen secara langsung di dalam? Mari sahkan pemikiran kita:

<!-- template -->
<div id="app">
    <div v-if="isShow">
        <h1>我是标题</h1>
        <p>我是段落</p>
    </div>
</div>

Ia sama seperti yang kita bayangkan. Tetapi dalam Vue, apabila kami menukar berbilang elemen, kami biasanya tidak menggunakannya dengan cara ini sebaliknya, kami menggunakan elemen <template> sebagai elemen pembungkusan dan menggunakan v-if padanya. Hasil pemaparan akhir tidak akan mengandungi elemen <template>. Ia kelihatan seperti ini:

<template v-if="isShow">
    <h1>标题</h1>
    <p>段落 1</p>
    <p>段落 2</p>
</template>

v-else

v-else serupa dengan else dalam JavaScript, tetapi Ia harus digunakan bersama dengan v-if. Sebagai contoh, jika kita log masuk, mesej alu-aluan akan dipaparkan jika log masuk, jika tidak, pengguna akan digesa untuk log masuk. Kemudian kita boleh menetapkan ungkapan isLogined, seperti:

<!-- Template -->
<div id="app">
    <h1 v-if="isLogined">欢迎来到W3cplus！(^_^)</h1>
    <h1 v-else>请先登录，再来！(^_^)</h1>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        isLogined: true
    }
})

Seperti yang anda fikirkan, anda boleh melihat kesan gambar berikut dalam penyemak imbas:

Ganti nilai isLogined dengan false, maka kandungan yang diberikan akan berubah:

Dalam projek sebenar, apabila kita mempunyai komponen Apabila kesan pemaparan kedua-dua keadaan adalah berbeza, ia mudah digunakan v-if dan v-else bersama dengan <template>. Contohnya, menang dan tidak menang:

<template v-if=&#39;isPrized&#39;>
    <figure>
        <figcaption>恭喜你中了5元红包</figcaption>
        <img src="xxx" />
    </figure>
</template>

<template v-else>
    <figure>
        <figcaption>亲，就差那么一点点</figcaption>
        <img src="xxx" />
    </figure>
</template>

v-else-if

v-else-if serupa dengan else if dalam JavaScript dan perlu dipadankan dengan v-if digunakan bersama. Apabila beberapa keadaan wujud pada masa yang sama, paparan atau tidak ditentukan berdasarkan hasil operasi. Seperti yang ditunjukkan dalam kod berikut, blok mana yang dipaparkan ditentukan berdasarkan nilai type. Sebagai contoh, dalam contoh kami, jika nilai type ditetapkan kepada B, maka blok B akan dipaparkan:

<!-- template -->
<div id="app">
    <div v-if="type === &#39;A&#39;">显示A区域</div>
    <div v-else-if="type === &#39;B&#39;">显示B区域</div>
    <div v-else>显示C区域</div>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        type: "B"
    }
})

Jika nilai type diubah suai, kawasan yang akan dipaparkan akan Berbeza:

v-show

---

文章开头提到过，除了v-if之外，Vue还提供v-show也可以控制元素的渲染。v-show和v-if功能有点相似，其中v-if依赖于控制DOM节点，而v-show是依赖于控制DOM节点的display属性。当v-show传入的值为true时，对应DOM元素的display的值为block之类的，反之为false时，display的值为none。也就是用户看不到元素的显示，但其DOM元素还是存在的。

<!-- Template -->
<div id="app">
    <h1 v-show="true">我是一个标题</h1>
    <p v-show="isShow">我是一个段落</p>
</div>

// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        isShow: false
    }
})

在浏览器看到的效果将是这样的：

注意，v-show 不支持 <template> 语法，也不支持 v-else。

v-if Vs. v-show

---

v-if和v-show都能控制DOM元素的显示和隐藏，但是在切换v-if模块时，Vue有一个局部编译/卸载过程，因为v-if中的模板可能包括数据绑定或者子组件，v-if是真是的条件渲染，它会确保条件快在切换时合适的销毁与重建条件块内的时间监听器和子组件。

两者之间的具体区别，官网是这样描述的：

• v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

总结

---

这篇文章主要了解了Vue中的v-if和v-show。这两个都是Vue的内部指令，而且都是用来控制元素的渲染。只不过，v-if判断是否加载，可以减轻服务器的压力，在需要时加载;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅。虽然这两都都能很好的控制元素的渲染，但实际使用的时候，更应该根据自己的场景来判断使用哪一个指令。

原文地址：:https://www.w3cplus.com/vue/v-if-vs-v-show.html

（学习视频分享：web前端开发、编程基础视频）

Atas ialah kandungan terperinci Penjelasan terperinci tentang arahan pemaparan bersyarat Vue: v-if dan v-show. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!