时间戳

首页 > 解决方案 > 在vue js中将模板文本作为html元素注入

vue.js - 在vue js中将模板文本作为html元素注入

问题描述

我正在寻找一个解决方案，其中我有一条线

This line have {{input}} in it and also the {{select}} in it.

现在这条线来自后端的数据库，我的前端是 Vue JS 2.6

我想要实现的是我想解析 {{input}} 并将其转换为 html 输入标签，如

<input type="text" class="some-class">

和 {{select}} 相同

<select> <option value="Option value">Option Content</option> </select>

我不确定如何将它注入 vue 我正在使用 vue 和 vuex

请指导我，任何帮助表示赞赏

标签： vue.jsvuejs2

解决方案

我不知道我是否正确，但您现在有一个模板字符串需要在组件中使用。您可以尝试将模板字符串转为组件，然后在父组件中使用。

Vue.component('my-input', {
  template: '<input type="text" class="some-class">'
})

<div id="parent-demo">
  <my-input></my-input>
</div>

如果你只有一个{{input}}字符串，需要把它转换成一个组件，你可以自己写一个转换函数转换{{input}}成一个模板string( <input type="text" class="some-class">)，然后按照上面的方法创建组件

推荐阅读