Kaip įdiegti sąlyginį atvaizdavimą Vue.js

Vue.js yra populiari „JavaScript“ sistema, leidžianti lengvai kurti dinamines žiniatinklio programas. Vue.js gali pateikti turinį pagal duomenis ir įvykius. Tai ypač naudinga kuriant reaguojančias ir interaktyvias vartotojo sąsajas.

Sužinokite, kas yra Vue direktyvos ir kaip jas naudoti norint pasiekti sąlyginį atvaizdavimą Vue.js.

Kas yra Vue direktyvos?

Vue direktyvos leidžia pagerinti HTML elementų veikimą Vue.js šablonuose, pridedant prie jų unikalių atributų.

Direktyvos yra pagrindinė Vue.js dalis ir suteikia paprastą bei galingą būdą manipuliuoti Dokumento objekto modelis (DOM), pridėti dinamišką elementų elgesį ir valdyti duomenis.

Be to, Vue.js leidžia kurti pasirinktines direktyvas, leidžiančias lengvai kurti daugkartinio naudojimo funkcijas Vue programoms.

„Vue“ sistema prieš savo direktyvas nurodo "v-" prieš direktyvos pavadinimą. „Vue“ dažniausiai naudojamų direktyvų pavyzdžiai apima v-on, v-bind, v-už, ir v-jei.

Kas yra sąlyginis atvaizdavimas?

Sąlyginis atvaizdavimas leidžia rodyti arba slėpti elementus pagal jūsų nurodytas sąlygas. Pavyzdžiui, galite naudoti sąlyginį atvaizdavimą, norėdami rodyti pranešimą vartotojams tik tuo atveju, jei jie įvedė galiojantį el. pašto adresą.

Vue.js galite naudoti tokias direktyvas kaip v-jei ir v šou kad pasiektumėte sąlyginį atvaizdavimą programoje, kitaip nei jūs darytumėte sąlygiškai pateikti turinį React.js.

Sąlyginio atvaizdavimo pasiekimas naudojant „v-if“ direktyvą

Panašus į JavaScript jei...kitaip pareiškimas, v-jei Vue.js direktyva turi sąlygą. Jei ji netenkinama, Vue.js įvertina šią sąlygą, nurodytą a v-kitaip direktyvą ir tai daro tol, kol įvykdys sąlygą arba įvertins visas sąlygas.

Ši direktyva leidžia sąlygiškai pateikti elementą pagal loginę reikšmę. Vue.js kompiliatorius nepateiks dalies, jei jos vertė yra klaidinga.

Čia pateikiamas turinio sąlyginio pateikimo pavyzdys v-jei:

html>
<htmllang="en">
<galva>
<titulą>dokumentastitulą>
<scenarijussrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarijus>
galva>
<kūnas>
<divid="programėlė">
<h1v-jei='klaidinga' >{{ pranešimas1 }}h1>
<h1v-kitaip >{{ pranešimas2 }}h1>
div>
<scenarijus>
 const app = Vue.createApp({
 duomenys () {
 return {
 1 pranešimas: „Tai jūsų „Vue“ programa“,
 2 pranešimas: „Dar ne „Vue“ programa.
 }
 }
 })
 app.mount('#app')
scenarijus>
kūnas>
html>

Aukščiau pateiktame kodo bloke pavaizduota „Vue“ programa, sukurta pridedant a Turinio pristatymo tinklas (CDN) nuoroda į HTML failo turinį. V-if direktyva pateiks elementą h1 tik tuo atveju, jei jo sąlyga yra teisinga.

„Vue“ programose yra situacijų, kai reikia pateikti komponentą pagal konkrečius dinaminius kriterijus. Tai naudinga tais atvejais, kai informacija rodoma tik tada, kai vartotojas spustelėja mygtuką arba rodomas įkėlimo indikatorius, kai duomenys įkeliami iš API.

Pavyzdžiui:

html>
<htmllang="en">
<galva>
<titulą>Vue programatitulą>
<scenarijussrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenarijus>
galva>
<kūnas>
<divid="programėlė">
<divv-jei="showUsers">
<ul>
<li>Vartotojas1li>
<li>Vartotojas2li>
ul>
div>
<mygtukąv-on: spustelėkite="toggleShowUsers()">
 Perjungti Vartotojus
mygtuką>
<h1>{{ pranešimas }}h1>
div>
<scenarijus>
 const app = Vue.createApp({
 duomenys () {
 return {
 showVartotojai: tiesa,
 pranešimas: „Tai jūsų „Vue“ programa.
 }
 },
 metodai: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
scenarijus>
kūnas>
html>

Aukščiau pateiktame kodo bloke naudojamas v-jei direktyva sąlygiškai pateikti turinį remiantis loginio kintamojo reikšme, šouVartotojai.

The div elementas rodomas, jei reikšmė yra tiesa ir paslėptas, jei yra klaidinga. Paspaudę Perjungti Vartotojus mygtukas suaktyvina toggleShowUsers() vertės keitimo būdas šouVartotojai.

Šiame pavyzdyje taip pat naudojamas v-on direktyvą klausytis įvykių, pvz., mygtuko paspaudimo įvykio. Jis iš naujo įvertina v-jei direktyva, kai tik vertė šouVartotojai pokyčius.

Sąlyginio atvaizdavimo pasiekimas naudojant „v-show“ direktyvą

The v šou direktyva yra dar vienas būdas sąlygiškai rodyti arba slėpti elementus Vue.js. Jis panašus į v-jei direktyvą, nes ji gali pateikti elementus, pagrįstus Būlio išraiška. Tačiau tarp šių dviejų direktyvų yra keletas esminių skirtumų.

The v šou direktyva nepašalina elemento iš DOM, kai išraiška įvertinama kaip false. Vietoj to, jis naudoja CSS, kad perjungtų elementą ekranas turtas tarp nė vienas ir jo pradinė vertė.

Tai reiškia, kad elementas vis dar yra DOM, bet nematomas, kai išraiška klaidinga.

Štai pavyzdys:

<kūnas>
<divid="programėlė">
<divv-jei="showUsers">
<ul>
<li>Vartotojas1li>
<li>Vartotojas2li>
ul>
div>
<mygtukąv-on: spustelėkite="toggleShowUsers()">
 Perjungti Vartotojus
mygtuką>
<h1v šou="showUsers">{{ pranešimas }}h1>
div>
<scenarijus>
 const app = Vue.createApp({
 duomenys () {
 return {
 showVartotojai: tiesa,
 pranešimas: „Tai yra „Vue“ programos vartotojai“
 }
 },
 metodai: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
scenarijus>
kūnas>

Aukščiau pateiktame kodo bloke naudojama v šou nurodymas parodyti pranešimą, kuriame teigiama:Tai yra „Vue“ programos vartotojai bet kuriuo metu spustelėjus perjungimo mygtuką.

Pasirinkimas tarp v-if ir v-show

Kai nuspręsite naudoti v-jei ir v šou nurodymus rodyti arba slėpti elementus Vue.js sąlygiškai, reikia atsižvelgti į keletą svarbių veiksnių.

Kai būklė keičiasi retai, naudokite v-jei direktyva yra gera. Tai yra, nes v-jei pašalina elementą iš DOM, kai sąlyga klaidinga, o tai gali trukdyti optimaliam veikimui. Elementas pateikiamas tik tada, kai sąlyga tampa teisinga, ir pašalinama iš DOM, kai sąlyga vėl tampa klaidinga.

Kita vertus, jei tikėtina, kad būklė dažnai keisis, geriau naudoti v šou direktyvą, kuri pagerina našumą. Tai yra, nes v šou naudoja CSS elementui paslėpti arba rodyti, perjungdamas CSS rodymo ypatybę tarp none ir block, palikdamas elementą visada pateikiamą DOM.

Lengvas sąlyginis atvaizdavimas jūsų „Vue“ programoje

Išmokote sąlygiškai pateikti turinį Vue programose naudodami v-if ir v-show direktyvas. Naudodami šias direktyvas galite greitai pateikti turinį atsižvelgdami į įvairias sąlygas, suteikdami jums daugiau galimybių valdyti „Vue“ komponentų išvaizdą ir elgesį.