Question

我正在寻找一种将html字符串导入我的VueJs组件并能够执行html代码中存在的任何VueJs代码的解决方案。我正在使用VueJs（2.5.x）+ CLI运行vue应用，并在运行后几秒钟，它向API发出请求以检索HTML代码。

HTML代码（导入并单击卡后，我应该能够更改accessCardId数据）：

<div class="md-card md-theme-default" v-on:click="accessCardId = '5bfc54cf553b485038333ee5'">
        <div class="md-card-media">
          <img src="/icons/europa.jpg" alt="People" class="icon">
        </div>
        <div class="md-card-header">
          <div class="md-title">Europa</div>
          <div class="md-subhead">Every where, you can us...</div>
        </div>
      </div>

VueJs脚本（位于home.vue中）：

<script>
  export default {
    name: 'Home',
    props: {
      msg: String
    },
    data: () => ({
      listCards: null,
      currentPage: -1,
      accessCardId: null
    }),
    filters: {
      shortDescription: description =>
        `${description.substring(0, 150)}${description.length > 150 ? '...' : ''}`
    },
    methods: {
      async loadPage() {
        await this.$http.get(`${process.env.VUE_APP_SERVER_URL}/icos?token=${process.env.VUE_APP_SERVER_TOKEN}&page=${this.currentPage + 1}`)
          .then(async res => {
            this.currentPage = this.currentPage + 1;
            // res.body === my html code
          });
        }
      }
    }
</script>

Answer 1

您可以使用v-html伪指令，该伪指令用于呈现不需要任何事件处理或数据绑定的静态html内容，并根据official doc：

span的内容将替换为rawHtml属性的值，该属性的值解释为纯HTML-数据绑定将被忽略。请注意，由于Vue不是基于字符串的模板引擎，因此无法使用v-html来组成模板部分。相反，组件是首选的UI重用和合成的基本单元

另一种解决方案是使用https://github.com/alexjoverm/v-runtime-template

中的软件包v-runtime-template

这可能对您的用例很有用，因为通常会担心这些方法对恶意注入的安全性。

VueJs CLI导入/编译html字符串到vue

1 个答案: