Rumah > Artikel > hujung hadapan web > Cara menggunakan v-if dalam vue
Cara menggunakan v-if dalam vue
- WBOYasal
- 2022-03-17 11:08:3652396semak imbas
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"".
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
(1) aplikasi v-if
<div id="app">
<h2 v-if="true">{{message}}</h2>
</div>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>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: '#app',
data: {
isUser: true
}
})
</script>
</body>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!