Menambah arahan Vue pada elemen secara pemrograman: panduan langkah demi langkah untuk v-if

Question

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() .

Answer 1

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.