将HTML编写为字符串变量/字符串模板的Vue方式

Question

在vanilla Javascript中，我们有时需要做字符串HTML并且它变得丑陋。我想知道是否有办法制作<template>并将其分配给变量而不是写出类似

的内容

var myHtml = "<div class='row'>This is my text</div>"

显然，这个例子很短暂，不会受到伤害，但考虑到它变得非常大。

可能是这样的：

var myHtml = `<div>This is good</div>`

或者

<template ref="myHtmlBlock">Text</template>

var myHtml = $refs.myHtmlBlock

主要目的是在块中使用变量，以便我可以说。

data() {
   return {
     myText: "Hello"
   }
} 

var html = `<div>{{ this.myText }}</div>`

与：相比：

var html = "<div>" + this.myText + "</div>"

Answer 1

看看：https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates/

在概述您的选择方面做得很好。当然，您的最佳选择取决于项目需求。

最近，我使用了 X模板。它分离出HTML内容，这有其优点和缺点：

• 专业版：设计人员可以在不弄乱您的代码的情况下进行操作
• 缺点：这是另一个要包含和管理的文件

X模板对我来说效果很好，并且似乎可以处理更大的HTML编码。