如何在Vue模板中渲染HTML标签？

最新推荐文章于 2024-09-13 14:29:24 发布

心悦蛋糕

最新推荐文章于 2024-09-13 14:29:24 发布

阅读量5.7k

点赞数 1

分类专栏： vue 文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/2301_77795034/article/details/131111623

版权

vue 专栏收录该内容

66 篇文章 3 订阅

订阅专栏

当你在Vue模板中需要渲染HTML标签时，你可以使用Vue的内置指令v-html。这个指令可以让父组件将数据作为HTML解析并渲染到子组件中。听起来很高级，但是我会用幽默的语言和简单的例子来解释这个概念。

首先，让我们来看一个简单的例子。假设你有一个包含HTML代码的数据属性，你想要将它渲染成一个带有链接和图片的页面。你可以这样做：

<template>  
  <div>  
    <child-component v-html="htmlCode"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      htmlCode: '<p><a href="https://www.example.com">This is a link</a></p><p><img src="https://www.example.com/image.jpg" alt="Example image"></p>'  
    };  
  }  
};  
</script>

在上面的例子中，我们将包含HTML代码的字符串赋值给了htmlCode数据属性。然后，在模板中，我们使用v-html指令将这个数据属性绑定到了子组件上。子组件是一个简单的

元素，它会把接收到的HTML代码作为解析后的HTML渲染到页面上。

现在，让我们来看一个更实际的例子。在模板中，我们使用v-html指令将content属性值渲染到了每个表格单元格中。这样，用户就可以点击链接并跳转到相应的页面了。

需要注意的是，使用v-html指令渲染HTML代码时需要格外小心，因为它可以允许任意的HTML和JavaScript代码在你的页面上执行。如果你不确定某个数据源的可靠性，最好对数据进行过滤和清理，以避免安全问题。

item.link包含一个链接，而item.image包含一个图片的HTML代码。

渲染包含动态数据的模板：

<template>  
  <div>  
    <my-component v-html="dynamicContent"></my-component>  
  </div>  
</template>  
  
<script>  
import MyComponent from './MyComponent.vue';  
  
export default {  
  components: { MyComponent },  
  data() {  
    return {  
      dynamicContent: `  
        <h1>Dynamic Content</h1>  
        <p>{{ dynamicMessage }}</p>  
        <ul>  
          <li v-for="item in dynamicItems">{{ item }}</li>  
        </ul>  
      `  
    };  
  },  
  computed: {  
    dynamicMessage() {  
      return 'Hello, this is dynamic content!';  
    },  
    dynamicItems() {  
      return ['Item 1', 'Item 2', 'Item 3'];  
    }  
  }  
};  
</script>