Ehdollinen renderöinti on olennainen osa mallintamista millä tahansa kielellä. Tutustu Vue.js-lähestymistapaan.

Vue.js on suosittu JavaScript-kehys, jonka avulla on helppo luoda dynaamisia verkkosovelluksia. Vue.js voi renderöidä sisältöä tietojen ja tapahtumien perusteella. Tämä on erityisen hyödyllistä luotaessa reagoivia ja interaktiivisia käyttöliittymiä.

Opi, mitä Vue-käskyt ovat ja kuinka niitä käytetään ehdolliseen hahmonnukseen Vue.js: ssä.

Mitä ovat Vue-direktiivit?

Vue-ohjeiden avulla voit parantaa HTML-elementtien toimintaa Vue.js-malleissa lisäämällä niihin ainutlaatuisia attribuutteja.

Direktiivit ovat olennainen osa Vue.js: ää, ja ne tarjoavat yksinkertaisen ja tehokkaan tavan manipuloida Document Object Model (DOM), lisää elementteihin dynaamista toimintaa ja hallitse tietoja.

Lisäksi Vue.js: n avulla voit luoda mukautettuja ohjeita, joiden avulla voit helposti luoda uudelleenkäytettäviä toimintoja Vue-sovelluksille.

Vue-kehys liittää sen ohjeiden eteen "v-" ennen direktiivin nimeä. Esimerkkejä Vuessa yleisesti käytetyistä direktiiveistä ovat mm

instagram viewer
v-on, v-sidos, v-for, ja v-jos.

Mikä on ehdollinen renderöinti?

Ehdollisen renderöinnin avulla voit näyttää tai piilottaa elementtejä määrittämiesi ehtojen perusteella. Voit esimerkiksi käyttää ehdollista renderöintiä näyttääksesi viestin käyttäjille vain, jos he ovat antaneet kelvollisen sähköpostiosoitteen.

Vue.js: ssa voit käyttää direktiivejä, kuten v-jos ja v-show saavuttaaksesi ehdollisen renderöinnin sovelluksessasi eri tavalla kuin tekisit renderöi sisältöä ehdollisesti React.js: ssa.

Ehdollisen renderoinnin saavuttaminen v-if-direktiivin avulla

Samanlainen kuin JavaScript tai muuten lausunto, v-jos Vue.js: n direktiivi sisältää ehdon. Jos se ei täyty, Vue.js arvioi seuraavan kohdassa a määritellyn ehdon v-else direktiiviä ja jatkaa niin, kunnes se joko täyttää ehdon tai arvioi kaikki ehdot.

Tämän käskyn avulla voit ehdollisesti hahmontaa elementin loogisen arvon perusteella. Vue.js-kääntäjä ei renderöi osaa, jos sen arvo on epätosi.

Tässä on esimerkki sisällön hahmontamisesta ehdollisesti v-jos:

html>
<htmllang="en">
<pää>
<otsikko>Asiakirjaotsikko>
<käsikirjoitussrc=" https://unpkg.com/vue@3/dist/vue.global.js">käsikirjoitus>
pää>
<kehon>
<divid="sovellus">
<h1v-jos='väärä' >{{ viesti1 }}h1>
<h1v-else >{{ viesti2 }}h1>
div>
<käsikirjoitus>
 const app = Vue.createApp({
 tiedot () {
 return {
 message1: "Tämä on Vue-sovelluksesi",
 viesti2: Ei vielä Vue-sovellus.
 }
 }
 })
 app.mount('#app')
käsikirjoitus>
kehon>
html>

Yllä oleva koodilohko kuvaa Vue-sovellusta, joka on luotu lisäämällä a Content Delivery Network (CDN) linkki HTML-tiedostosi runkoon. V-if-direktiivi hahmontaa h1-elementin vain, jos sen ehto on tosi.

Vue-sovelluksissa on tilanteita, joissa sinun on renderöitävä komponentti tiettyjen dynaamisten kriteerien perusteella. Tästä on hyötyä sellaisissa tilanteissa, kuten tietojen näyttäminen vain, kun käyttäjä napsauttaa painiketta, tai latausilmaisimen näyttäminen, kun tietoja ladataan API: sta.

Esimerkiksi:

html>
<htmllang="en">
<pää>
<otsikko>Vue sovellusotsikko>
<käsikirjoitussrc=" https://unpkg.com/vue@3/dist/vue.global.js">käsikirjoitus>
pää>
<kehon>
<divid="sovellus">
<divv-jos="showUsers">
<ul>
<li>Käyttäjä1li>
<li>Käyttäjä2li>
ul>
div>
<-painikettav-on: napsauta="toggleShowUsers()">
 Vaihda käyttäjät
-painiketta>
<h1>{{ viesti }}h1>
div>
<käsikirjoitus>
 const app = Vue.createApp({
 tiedot () {
 return {
 showKäyttäjät: totta,
 viesti: "Tämä on Vue-sovelluksesi."
 }
 },
 menetelmät: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
käsikirjoitus>
kehon>
html>

Yllä oleva koodilohko käyttää v-jos käsky, joka esittää sisällön ehdollisesti loogisen muuttujan arvon perusteella, showKäyttäjät.

The div elementti näytetään, jos arvo on totta ja piilotettu, jos on väärä. Napsauttamalla Vaihda käyttäjät -painike laukaisee toggleShowUsers() tapa muuttaa arvoa showKäyttäjät.

Tässä esimerkissä käytetään myös v-on käsky kuunnella tapahtumia, kuten painikkeen napsautustapahtumaa. Se arvioi uudelleen v-jos direktiivi aina kun arvo showKäyttäjät muutoksia.

Ehdollisen renderoinnin saavuttaminen v-show-direktiivin avulla

The v-show direktiivi on toinen tapa näyttää tai piilottaa Vue.js: n elementtejä ehdollisesti. Se on samanlainen kuin v-jos direktiiviä siinä mielessä, että se voi hahmontaa elementtejä Boolen lausekkeen perusteella. Näiden kahden direktiivin välillä on kuitenkin joitain kriittisiä eroja.

The v-show direktiivi ei poista elementtiä DOM: sta, kun lausekkeen arvo on epätosi. Sen sijaan se käyttää CSS: ää elementin vaihtamiseen näyttö välistä omaisuutta ei mitään ja sen alkuperäinen arvo.

Tämä tarkoittaa, että elementti on edelleen DOM: ssa, mutta se ei näy, jos lauseke on epätosi.

Tässä on esimerkki:

<kehon>
<divid="sovellus">
<divv-jos="showUsers">
<ul>
<li>Käyttäjä1li>
<li>Käyttäjä2li>
ul>
div>
<-painikettav-on: napsauta="toggleShowUsers()">
 Vaihda käyttäjät
-painiketta>
<h1v-show="showUsers">{{ viesti }}h1>
div>
<käsikirjoitus>
 const app = Vue.createApp({
 tiedot () {
 return {
 showKäyttäjät: totta,
 viesti: "Nämä ovat Vue-sovelluksen käyttäjiä"
 }
 },
 menetelmät: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
käsikirjoitus>
kehon>

Yllä oleva koodilohko käyttää v-show käsky näyttää viesti, jossa sanotaan "Nämä ovat Vue-sovelluksen käyttäjiä aina kun napsautat vaihtopainiketta.

Valinta v-if- ja v-shown välillä

Kun päätät käyttää v-jos ja v-show käskyjä näyttää tai piilottaa Vue.js: n elementtejä ehdollisesti, on joitakin tärkeitä tekijöitä, jotka on otettava huomioon.

Kun tila muuttuu harvoin, käytä v-jos ohje on hyvä. Tämä johtuu siitä, että v-jos poistaa elementin DOM: sta, kun ehto on epätosi, mikä voi haitata optimaalista suorituskykyä. Elementti hahmonnetaan vasta, kun ehdosta tulee tosi, ja poistetaan DOM: sta, kun ehdosta tulee jälleen epätosi.

Toisaalta, jos tila todennäköisesti muuttuu usein, on parempi käyttää v-show direktiiviä, mikä parantaa suorituskykyä. Tämä johtuu siitä, että v-show käyttää CSS: ää elementin piilottamiseen tai näyttämiseen vaihtamalla CSS-näyttöominaisuuden none- ja block välillä, jolloin elementti renderöidään aina DOM: iin.

Ehdollinen renderöinti Vue-sovelluksessasi on helppoa

Olet oppinut renderöimään sisältöä ehdollisesti Vue-sovelluksissa v-if- ja v-show-käskyjen avulla. Näitä ohjeita käyttämällä voit nopeasti renderöidä sisältöä eri olosuhteiden mukaan, jolloin voit hallita paremmin Vue-komponenttien ulkoasua ja toimintaa.