- Vue.js 2.x by Example
- Mike Street
- 193字
- 2021-07-02 20:00:25
v-html
The v-html directive allows you to output content without using the mustache-style curly bracket syntax. It can also be used if your output contains HTML tags – it will render the output as HTML instead of plain text. The value of the HTML attribute is that of the data key or computed function name:
View:
In your view app space, add the v-html attribute to an element:
<p id="app">
<p v-html="message"></p>
</p>
JavaScript:
In the JavaScript, set the message variable to a string which contains some HTML elements:
const app = new Vue({
el: '#app',
data: {
message: '<h1>Hello!</h1>'
}
});
You should try and avoid adding HTML to your Vue instance, as it starts to mix up the View in the ViewModel and Model of our MVVM structure. There is also the danger you output an invalid HTML tag inside another. You should only use v-html with data you trust, because using it with an external API could be a security concern as it would allow the API to have control over your application. A potentially malicious API could use v-html to inject undesired content and HTML. Only use v-html with data you can fully trust.
- 極簡算法史:從數學到機器的故事
- ReSharper Essentials
- Mastering Adobe Captivate 2017(Fourth Edition)
- 神經網絡編程實戰:Java語言實現(原書第2版)
- Spring Cloud、Nginx高并發核心編程
- Mastering Kali Linux for Web Penetration Testing
- Spring+Spring MVC+MyBatis整合開發實戰
- Node.js Design Patterns
- C#實踐教程(第2版)
- Haskell Data Analysis Cookbook
- 速學Python:程序設計從入門到進階
- INSTANT Silverlight 5 Animation
- C#程序設計基礎入門教程
- 征服C指針(第2版)
- Learning Shiny