如何使用 Vue.js 在变量中渲染模板？

Posted 2023-02-22

【中文标题】如何使用 Vue.js 在变量中渲染模板？

【英文标题】：How can I render template in a variable with Vue.js?

【发布时间】：2016-06-06 03:38:16

【问题描述】：

在 mustache.js 中，templates can be passed as an argument of Mustache.render() as follows:

var view = 
  title: "Joe",
  calc: function () 
    return 2 + 4;
  
;

var output = Mustache.render("title spends calc", view);

我正在寻找一种以这种方式使用 Vue.js 的方法，渲染一个存储在变量中的模板，然后从 render function of jQuery DataTables 返回渲染后的 html，而无需操作 DOM。

我可以用 Vue.js 实现这个吗？如果我不能，我应该使用 mustache.js 而不是 Vue.js 来实现它吗？任何更好的方法的建议也将不胜感激。

【问题讨论】：

我不知道我是否做对了，但这就像在 Vue 组件或实例中设置 template 属性一样？模板属性获取在设置el 属性的位置呈现的字符串

嗨 Yerko，使用template 属性听起来很有希望。你有什么想法在不修改 DOM 的情况下获得呈现的 HTML（例如，将呈现的 HTML 作为方法的返回值）？

如果你得到了 html 渲染，那么你正在修改 DOM。如果不将其添加到 DOM，则无法呈现 html。你可能想动态显示你的html？在这种情况下，您应该查看 v-if 指令，该指令仅在满足特定条件时才会插入要在 DOM 中显示的 html。

你说得对，但我不想自己修改 DOM。我希望 jQuery DataTables 通过实现返回呈现的 HTML 字符串的this callback function 来做到这一点。

【参考方案1】：

你可以用这样的方式来近似 Mustache 行为：

var view = new Vue(
    data: 
        title: 'Joe'
    ,
    methods: 
      calc: function () 
        return 2 + 4;
          
    
)

var output = view.$interpolate('title spends calc()');

【讨论】：

太好了，这正是我想要的！我已经确认您的解决方案适用于 vue.js 0.11.0。

再多一点 - 你知道用这种方式自动转义 HTML 字符（例如< => <）吗？

@Kohei - 对此感到抱歉；我想我对逃跑的看法是错误的。我本可以发誓我在发表评论之前对此进行了测试，但我想不会。无论如何，我认为 Mustache 模板会更适合您的场景 - 为 DataTables 列呈现模板字符串。 Vue.js 旨在处理渲染 DOM 并将其响应式绑定到您的数据的场景。

@Peter，view.$interpolate 不是函数（（（不幸的是

是的，这个功能在 vue v1 中存在，但在 v2 中被移除。 vuejs.org/v2/guide/migration.html#vm-interpolate-removed