html转vue工具

<template>
  <div id="app">
    <!-- 这里是你的HTML内容 -->
    <h1>{{ message }}</h1>
    <p v-html="htmlContent"></p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue!',
      htmlContent: '<strong>This is HTML content converted to Vue.</strong>'
    };
  }
};
</script>

<style scoped>
/* 这里可以添加样式 */
h1 {
  color: blue;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 将原始的HTML内容包裹在<div id="app">中。
   • 使用了Vue的双大括号语法{{ message }}来动态插入数据。
   • 使用v-html指令将HTML字符串渲染为实际的HTML内容。

2. 脚本部分 (<script>):

   • 定义了一个Vue组件，命名为App。
   • 在data函数中返回了一个对象，包含两个属性：message和htmlContent。message是一个简单的字符串，而htmlContent是一个包含HTML标签的字符串。

3. 样式部分 (<style scoped>):

   • 添加了一些简单的样式规则，仅作用于当前组件内的元素。

这个示例展示了如何将静态HTML内容转换为Vue组件，并使用Vue的特性来增强其功能。