时间戳

首页 > 解决方案 > Vue插值在API获取的文本中不起作用

vue.js - Vue插值在API获取的文本中不起作用

问题描述

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

Some text {{rules}} other text

具有数据值：

rules: "some text"

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

Some text {{rules}} other text

谢谢你的回答

标签： vue.jsinterpolationlinear-interpolation

解决方案

考虑到上面的评论：

我有：模板：{{someText}} 有数据：data() { return { someText:"some text {{ myValue }} some text", myValue:"300", } }，如何在模板中显示来自 myValue 的数据？

你不会在 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() 我在计算属性中创建了一个小解析器，它非常粗略地替换了someText数据属性中的双括号并返回修改后的字符串，以便让它在数据属性中工作。

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

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

推荐阅读