10 Vue3中v-html指令的用法
在Vue 3中，v-html指令用于设置元素的innerHTML。这通常用于将包含HTML标签的字符串渲染为实际的HTML元素。
警告：在使用v-html时，请务必谨慎，因为它会使您的站点易受XSS攻击。只在可信的内容上使用v-html指令。
以下是一个简单的例子，展示如何在Vue 3组件中使用v-html指令：
<template>
<div v-html="rawHtml"></div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const rawHtml = ref('<p>这是<b>HTML</b>内容</p>');
return { rawHtml };
}
};
</script>在这个例子中，rawHtml是一个包含HTML标签的字符串。使用v-html指令将其渲染到模板中，并在页面上显示为实际的HTML元素，而不是纯文本。
评论已关闭