如何在VueJS中的字符串中插入变量

Posted 2023-02-22

【中文标题】如何在VueJS中的字符串中插入变量

【英文标题】：How to interpolate variable within a string in VueJS

【发布时间】：2020-08-20 12:50:26

【问题描述】：

我想在 VueJS 中插入一个包含变量和 html 的字符串。 Vue有选项吗？

组件.vue

<template>
    <div v-html="test1"></div>
</template>


<script>
export default 
  name: 'component',
  data() 
    return 
      test: "test interpolation",
      test1: " <p> some text  test  </p>",
    ;
  ,

</script>

test1 变量中的字符串是在 Http 请求后从 Json 文件中加载的

【问题讨论】：

看看vuejs.org/v2/api/#Vue-compile

【参考方案1】：

export default 
    data () 
      return 
        rawHtml: "<h1> This is some HTML </h1>",
      
    ,
    render()
        return(
          <div>
            <div domPropsInnerHTML=this.rawHtml> </div>
          </div>
        )
      

domPropsInnerHTML 属性执行与 v-html 相同的任务，它将 div 的内容设置为 rawHtml。

Ref for more

More Example