javascript - Vuejs2 打印由换行符分隔的数组元素

标签 javascript vue.js vuejs2

我使用的是vuejs2,我有一个select标签,其中选择了一个person,并且该人的地址的属性直接绑定(bind)在元素中。 我应该打印出所选人员的地址 我尝试使用数组,它的目的是打印出由换行符分隔的元素。

{{ 
    [ 
        person.address_1, 
        person.address_2, 
        person.zip_code + ' ' + person.station_city, 
        person.country_name 
    ].join('<br>') 
}}

这应该作为示例打印:

5 Place Charles Béraudier 
Gare de Lyon Part dieu
69003 LYON
France

不知何故,代码格式不正确。它打印出代码而不是值。

最佳答案

默认情况下,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>')"/>

关于javascript - Vuejs2 打印由换行符分隔的数组元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56473192/

相关文章:

javascript - 如何在悬停时向不同的 div 元素添加不同的背景图像?

javascript - 缺少默认作用域插槽 Vuetify

angular - 什么相当于 Angular 2+ 中的 Vue 的 Vuex?

cordova - npm run build = 没有图像

javascript - Controller 方法完成后在 toastr 中显示消息

javascript - 在单击事件中使用 jQuery AJAX 时出现 "Exception: ... [nsIWebProgressListener::onStatusChange]"?

javascript - 观察服务中的对象属性时,Ember Js 计算组件中的属性失败

vue.js - 如何从 vue-i18n 获取货币符号

javascript - 如何从子组件的操作中强制重新加载父组件

vuejs2 - 如何动态更改 Element UI 和 Vue 中的语言?