Menambah arahan Vue pada elemen secara pemrograman: panduan langkah demi langkah untuk v-if
P粉883973481
P粉883973481 2023-09-07 13:54:54
0
1
627

Kami boleh menambah atribut tersuai secara pemrograman pada elemen menggunakan JS tulen, bagaimana pula dengan arahan Vue seperti element.attr('data-attr', someValue),但是像 v-if

Diberikan unsur-unsur berikut

<p v-html="data.title"></p>

Bagaimana untuk menambah v-if secara terprogram? Saya meminta ini untuk tujuan automasi kerana akan terdapat beratus-ratus pembolehubah dinamik yang mungkin wujud atau tidak.

Hasil yang diinginkan ialah

<p v-if="data.title" v-html="data.title"></p>

Satu-satunya langkah yang saya tahu ialah menggunakan elemen dalam ref 获取 created() .

P粉883973481
P粉883973481

membalas semua(1)
P粉764785924

Mengikut pengisytiharan - Akan terdapat ratusan pembolehubah dinamik yang mungkin wujud atau tidak. Tetapi jika saya melihat dalam komen anda, anda berkata > tiada gelung . Jadi bagaimana anda memberikan elemen dinamik?

Dari pemahaman saya, anda ingin mengikat atribut data secara dinamik ke dalam templat HTML. Anda boleh mencuba penyelesaian ini dan melihat sama ada ia memenuhi keperluan anda.

new Vue({
  el: '#app',
  data: {
    data: {
        heading: '<H1>Heading 1</H1>',
      title: '<h3>Title 1</H3>'
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p v-for="(item, index) in Object.keys(data)" :key="index"  v-html="data[item]"></p>
</div>

Coretan kod di atas sentiasa berfungsi dengan sifat dinamik sedia ada.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan