v-html

Misol

<ol> va <li> teglarini o‘z ichiga olgan ro‘yxatni chiqarish uchun v-html direktivasidan foydalanish.

<div id="app">
<div>{{ htmlContent }}</div>
<div v-html="htmlContent"></div>
</div>

Quyida ko‘proq misollarni ko‘ring.

Ta’rif va qo‘llanilishi

v-html direktivasi elementga HTML teglar va matn joylashtirish uchun ishlatiladi.

Agar HTML teglarni matn interpolyatsiyasi (jingalak qavslar {{ }}) yordamida chiqarishga harakat qilsangiz, natija shunchaki matnli string bo‘ladi. Yuqoridagi misolga qarang.

Bir faylli komponentlarda (SFC) <style scoped> yordamida aniqlangan scoped uslublar v-html direktivasi orqali qo‘shilgan HTMLga ta’sir qilmaydi. Quyidagi birinchi misolga qarang.

SFC’larda v-html bilan qo‘shilgan HTML uchun scoped uslublarga erishish maqsadida <style module> bilan CSS modullaridan foydalanishimiz mumkin. Quyidagi ikkinchi misolga qarang.

Eslatma: Foydalanuvchilar v-html orqali qo‘shiladigan kontentni qandaydir yo‘l bilan belgilay oladigan sahifalar saytlararo skripting (XSS) hujumlari xavfi ostida bo‘ladi.

Ko‘proq misollar

1-misol

Scoped uslublardan foydalanilganda uslublar v-html orqali qo‘shilgan HTML uchun ishlamaydi.

Bu muammo keyingi misolda hal qilingan.

<template>
  <h1>Example</h1>
  <p>When using scoped styling, styling for HTML included with the 'v-html' directive does not work.</p>
  <p><a href="showvue.php?filename=demo_ref_v-html2_2">See the next example</a> for how we can fix this by using CSS Modules.</p>
  <div v-html="htmlContent" id="htmlContainer"></div>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: "<p>Hello from v-html</p>"
    }
  }
};
</script>

<style scoped>
  #htmlContainer {
    border: dotted black 1px;
    width: 200px;
    padding: 10px;
  }
  #htmlContainer > p {
    background-color: coral;
    padding: 5px;
    font-weight: bolder;
    width: 150px;
  }
</style>

Misolni ishga tushirish »

2-misol

<style scoped> o‘rniga <style module> bilan CSS modullaridan foydalanilganda uslublar scoped bo‘ladi va v-html orqali qo‘shilgan HTML uchun ham ishlaydi.

Oldingi misoldagi bu muammo endi tuzatildi.

<template>
  <h1>Example</h1>
  <p>Scoped styling for HTML included with the 'v-html' directive now works by using CSS Modules with 'style module', instead of 'style scoped'.</p>
  <div v-html="htmlContent" :id="$style.htmlContainer"></div>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: "<p>Hello from v-html</p>"
    }
  }
};
</script>

<style module>
  #htmlContainer {
    border: dotted black 1px;
    width: 200px;
    padding: 10px;
  }
  #htmlContainer > p {
    background-color: coral;
    padding: 5px;
    font-weight: bolder;
    width: 150px;
  }
</style>

Misolni ishga tushirish »

Tegishli sahifalar

Vue darsligi: Matn interpolyatsiyasi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish