Javascript 如何使用vue js附加元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43671375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to append element using vue js
提问by Anthony Dekoci
I have variable array of objects, one of which is contains element pin the string. And I want to append to element div.profile-description
我有可变的对象数组，其中一个包含字符串中的元素p。我想附加到元素div.profile-description
But the result is vue js return raw html to div.profile-description
但结果是 vue js 返回原始 html 到div.profile-description
I want to p in the stringbecome element in html
我想将字符串中的 p变成html 中的元素
var interviewees = [
{name: 'Anthony', profession: 'Developer', description: '<p>Now he works in one</p><p>very famous company</p>'},
{name: 'Erick', profession: 'Gamer', description: '<p>He is focusing on playing</p><p>the heroes of the storm game</p>'}
];
var setDescription = new Vue({
el: '.profile-description',
data: {
interviewee_description: interviewees[1].description
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<div class="profile-description">
{{ interviewee_description }}
</div>回答by Bert
Use the v-htmldirective.
使用v-html指令。
<div class="profile-description">
<div v-html="interviewee_description"></div>
</div>
Typically, you should use a selector that only returns a single element. classwill have unexpected results if there are more than one that match your selector.
通常，您应该使用只返回单个元素的选择器。class如果有多个匹配您的选择器，则会产生意想不到的结果。
例子。
回答by Sergio Rodrigues
You need use the v-htmldirective:
您需要使用v-html指令：
<div v-html="interviewee_description" class="profile-description"></div>
Alert:
警报：
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content. https://vuejs.org/v2/guide/syntax.html#Raw-HTML
在您的网站上动态渲染任意 HTML 可能非常危险，因为它很容易导致 XSS 漏洞。仅对受信任的内容使用 HTML 插值，切勿对用户提供的内容使用。 https://vuejs.org/v2/guide/syntax.html#Raw-HTML
