API获取的文本中vue插值不起作用

Question

通过 API 获取文本，在文本中有 {{}} 中的实体，例如：

Some text {{rules}} other text

有数据值：

rules: "some text"

但是这个值没有插值，显示：

Some text {{rules}} other text

感谢回答

Answer 1

考虑以上评论：

I have: template: {{someText}} have data: data() { return { someText: "some text {{ myValue }} some text", myValue: "300", } }, How display data from myValue in template?

你不会像在 Vue 中那样进行插值。双大括号 ({{}}) 用于模板部分，而不是脚本。

看看这个片段：

new Vue({
  el: "#app",
  data() {
    return {
      someText: "some text {{ myValue }} some text",
      myValue: "300"
    }
  },
  computed: {
    parsedSomeText() {
      let ret = ''
      if (/(\w+)(?= }})/g.test(this.someText)) {
        let key = String(this.someText).match(/(\w+)(?= }})/g)[0]
        if (Object.keys(this.$data).includes(key)) {
          ret = this.someText.replace(/{{ (\w+) }}/g, this.$data[key])
        }
      }
      return ret
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  myValue: {{myValue}}<br /> someText: {{someText}}<br />parsedSomeText: {{parsedSomeText}}
</div>

我在 parsedSomeText() computed 属性 中创建了一个小型解析器，非常粗略地替换了 someText 数据中的双括号属性和 returns 修改后的字符串，所以要让它在 data 属性.

中工作

我建议您查看收到的数据，并考虑另一种解决方案 - 或者利用一些可靠的解析技术在生产中使用它。

如果你无法避免以这种方式获取数据，那么你应该研究动态（运行-时间）编译（如：https://alligator.io/vuejs/v-runtime-template/) and render functions (https://vuejs.org/v2/guide/render-function.html）。有了这些，你的 Vue 应用程序变得更通用但更复杂。

API获取的文本中vue插值不起作用

Vue interpolation does not work in the text obtained by API

interpolation

linear-interpolation

vue.js