Vue 學習筆記3 Vue指令 v-text v-html
阿新 • • 發佈：2020-08-21
v-text
設定標籤的文字值（textContent）
<h3 v-text="message"></h3>
可以進行拼接操作，如：
<h3 v-text="message+'123'"></h3>
v-html
設定標籤的innetHTML
<h3 v-html="content"></h3>
完整程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lesson 3 Vue表示式 v-text v-html</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script> </head> <body> <div id="app"> <p v-text="message"></p> <p v-text="message+'!!'"></p> <p v-html="content"></p> </div> <script> let tmp = new Vue({ el: "#app", data: { "message": "Hello Vue", "content": "<a href='https://www.bilibili.com' target='blank'>嗶哩嗶哩</a>" } }) </script> </body> </html>