如何将标签数组作为文本包装器从 js 代码转换为 vue？

Question

I have this js code:

var tags = [
    'b',
    'i'
    'u',
];

var text = 'some simple text';

tags.forEach(tag => {
    text = '<' + tag + '>' + text + '</' + tag + '>';
});

//print wrapped "text" variable on the page (Upd:) like: <b><i><u>Some text</u></i></b>

How to convert this to vue component/template?

Answer 1

You have two options:

1. Use Your function to generate html code and then simply put result in v-html <div v-html="xxx" /> Docs: https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML
2. Use dynamic components like this https://jsfiddle.net/Herteby/ffe5rban/ Docs: https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

In Your case first option is better choice. Dynamics components are actually designed for Vue components, not raw html tags - but it's possible to use them this way if You really need to.

Answer 2

Create a computed property called tagged and render it inside the template using v-html directive:

 var app=new Vue({ el: "#app", data() { return { text: "some text" }; }, computed: { tagged() { var tags = [ 'b', 'i', 'u', ]; tags.forEach(tag => { this.text = '<' + tag + '>' + this.text + '</' + tag + '>'; }); return this.text; } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-html="tagged"></div> </div>

Second solution is to create a component with the 3 tags and pass the text as prop:

 Vue.component('bui-tag', { props: ['text'], template: `<b><u><i>{{text}}</i></u></b>` }) var app = new Vue({ el: "#app", data() { return { text: "some text" }; }, computed: { tagged() { var tags = [ 'b', 'i', 'u', ]; tags.forEach(tag => { this.text = '<' + tag + '>' + this.text + '</' + tag + '>'; }); return this.text; } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <bui-tag:text="text" /> </div>

Answer 3

The acceptability of v-html depends on the source of markup data. It shouldn't be used with unsanitized, user-defined HTML, doing this is dangerous and may result in script injections.

This is the case for render function , it allows to build a hierarchy of tags that will be rendered into DOM elements:

export default {
  render(h) {
    return tags.reduceRight(
      (wrapper, tag) => h(tag, [wrapper]),
      text
    );
  }
};