Cara menggunakan v-if dalam vue-View.js-php.cn

Cara menggunakan v-if dalam vue

WBOY

Lepaskan： 2022-03-17 11:08:36

asal

52376 orang telah melayarinya

Dalam vue, "v-if" digunakan untuk mengendalikan elemen DOM mengikut ungkapan benar atau salah, dan boleh menukar paparan dan menyembunyikan elemen apabila nilai ungkapan itu benar, elemen itu wujud; dalam pokok dom , apabila ungkapan palsu, elemen itu dialih keluar daripada pokok DOM dan sintaksnya ialah "v-if="expression"".

Cara menggunakan v-if dalam vue

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue 2.9.6, komputer DELL G3.

Penggunaan v-if dalam vue

v-if: Tukar paparan dan penyembunyian elemen (menjalankan elemen DOM) berdasarkan ungkapan benar atau salah bagi ungkapan

Cara menggunakan v-if dalam vue

(1) aplikasi v-if

<div id="app">
 <h2 v-if="true">{{message}}</h2>
</div>

Salin selepas log masuk

hanya akan memaparkan data apabila ia benar

( 2) v-if dan v-else

<div id="app">
 <h2 v-if="false">{{message}}</h2>
  <h1 v-else>hello</h1>
</div>

Salin selepas log masuk

Laksanakan jika apabila v-if benar, jika tidak, laksanakan lain

(3) Kes: v- jika Aplikasi dengan v-else

<body>
<div id="app">
    <span v-if="isUser">
      <label for="username">用户账号</label>
      <input type="text" id="username" placeholder="用户账号">
    </span>
    <span v-else>
        <label for="email">用户邮箱</label>
        <input type="text" id="email" placeholder="用户邮箱">
    </span>
   <button @click="isUser=!isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: &#39;#app&#39;,
        data: {
            isUser: true
        }
    })
</script>
</body>

Salin selepas log masuk

Klik untuk menukar jenis untuk menukar kandungan paparan Pada masa ini, akan ada masalah penggunaan semula teg input (kandungan dalam kotak input tidak tidak berubah selepas bertukar, ini ialah DOM Maya, gunakan semula elemen sedia ada sebanyak mungkin dan bukannya mencipta elemen baharu, yang boleh meningkatkan prestasi), anda boleh menambah atribut utama, apabila kunci adalah sama, kandungan akan dikekalkan, dan apabila mereka berbeza, mereka tidak akan dikekalkan

【Cadangan berkaitan: "tutorial vue.js"]

Atas ialah kandungan terperinci Cara menggunakan v-if dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!