Question

我正在使用vuejs2，我有一个EOL标记，其中选择了EOL，此人地址的属性直接绑定在元素中。我应该打印出所选select的地址我尝试使用数组，它的意思是打印出由换行符分隔的元素。

person

这应该作为示例打印：

person

以某种方式，代码格式不正确。并打印出代码而不是值。

Answer 1

默认情况下，Vue中的{{ var }}表示符转义任何HTML。要输出原始HTML，可以使用v-html指令：

<div v-html="[ 
    person.address_1, 
    person.address_2, 
    person.zip_code + ' ' + person.station_city, 
    person.country_name 
].join('<br>')"/>

Answer 2

如果您因为危险而不想使用v-html：https://vuejs.org/v2/guide/syntax.html#Raw-HTML

在网站上动态呈现任意HTML可能非常危险，因为它很容易导致XSS漏洞。仅在受信任的内容上使用HTML插值，而不在用户提供的内容上使用。

您可以改用<pre>标签：https://www.w3schools.com/tags/tag_pre.asp

因此，您需要一个计算方法：

<pre>{{ formattedAddress }}</pre>

computed: {
  formattedAddress () {
    return `${this.person.address_1}\n${this.person.address_2}\n${this.person.zip_code} ${this.person.station_city}\n${this.person.country_name}`
  }
}

Vue.js2打印数组元素由换行符分隔

2 个答案: