Rumah > hujung hadapan web > View.js > teks badan

Cara menggunakan v-if dalam vue

WBOY
Lepaskan: 2022-03-17 11:08:36
asal
52394 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!

Label berkaitan:
vue
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan