v-html (v-html)
دایرکتیو «v-html» یعنی «خروجی HTML خام بده». «دایرکتیو (Directive)» دستور ویژه قالب است. با آن می توان تگ ها و متن را مستقیم داخل عنصر گذاشت. اما با آکولادها، فقط متن ساده می بینی.
تعریف و کاربرد v-html
«v-html» تگ ها و متن HTML را داخل یک عنصر می گذارد. اگر با {{ }} بنویسی، فقط رشته متن نمایش می شود. بنابراین، وقتی واقعاً به تگ نیاز داری، از «v-html» استفاده کن.
مثال پایه: تفاوت با آکولاد
یک لیست را یک بار با آکولاد، و یک بار با «v-html» نشان می دهیم.
<template>
<div id="app">
<div>{{ htmlContent }}</div>
<div v-html="htmlContent"></div>
</div>
</template>
<script>
export default {
data() {
return {
htmlContent: '<ol><li>One</li><li>Two</li></ol>'
};
}
};
<\/script>
استایل Scoped روی v-html اثر ندارد
در SFC اگر «style scoped» باشد، قوانینش روی محتوای «v-html» اعمال نمی شود.
<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>
راه حل: CSS Modules با style module
به جای «scoped»، از «style module» استفاده کن تا روی «v-html» هم اعمال شود.
<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>
گام های عملی
- داده HTML را در یک متغیر ذخیره کن.
- عنصر مقصد را مشخص و «v-html» بده.
- اگر SFC داری، از CSS Modules استفاده کن.
هشدار: اگر کاربر بتواند محتوا تعیین کند، خطر «XSS» وجود دارد. همیشه ورودی ها را کنترل کن.
برای ادامه دایرکتیوها، صفحه مرجع دایرکتیوها را ببین. همچنین اتصال ویژگی را در v-bind تمرین کن. و برای حلقه ها، v-for را بخوان. اگر خواستی همین صفحه را ذخیره کنی، از لینک دایرکتیو v-html استفاده کن.
جمع بندی سریع
- «v-html» تگ ها را مستقیم وارد می کند.
- آکولادها فقط متن ساده می دهند.
- در SFC از CSS Modules کمک بگیر.
- ورودی های کاربر را ایمن سازی کن.