[Vuejs] v-html

2020. 12. 4. 11:41ยท WEB/Vue.js
๋ชฉ์ฐจ
  1. v-html
๋ฐ˜์‘ํ˜•

v-html

 

 

๐Ÿ‘ v-html

vue์—์„œ html ๊ทธ๋Œ€๋กœ ์ ์šฉ์‹œํ‚ฌ ๊ฒฝ์šฐ, v-html ์˜ต์…˜์„ ์ด์šฉํ•ด์„œ ์ ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค.

ex) TextEditor(quill)์—์„œ ์ž…๋ ฅํ•œ ๋‚ด์šฉ์„ ํ‘œ์‹œํ•  ๋•Œ, ๊ฐ’์„ html ๋กœ ๋ฐ˜ํ™˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— html์„ ๊ทธ๋Œ€๋กœ ํ‘œ์‹œํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” v-html์„ ์ด์šฉํ•œ๋‹ค.

<template>
	<div v-html="contents" />
</template>

<script>
export default {
	data: () => ({
    	contents: '<span>aaaa</span>',
    }),
}
</script>
  • vue์—์„œ v-html์‚ฌ์šฉ ์‹œ  XSS ๊ณต๊ฒฉ ์˜ˆ๋ฐฉ์„ ์œ„ํ•ด eslint ์—์„œ ๊ฒฝ๊ณ (warning)๋ฅผ ๋ฐœ์ƒํ•œ๋‹ค.

  • ๊ฒฝ๊ณ ๋ฅผ ์—†์• ๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ฝ”๋“œ ์ตœ์ƒ๋‹จ์— ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ๋ฉด ๋œ๋‹ค.
  • ์ฐธ๊ณ : https://github.com/vuejs/eslint-plugin-vue/issues/260
<!-- eslint-disable vue/no-v-html -->

 

 

 

๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'WEB > Vue.js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Vue.js] Custom Directive : Outside Click Event  (0) 2021.01.13
[Vue.js] Custom Directive  (0) 2021.01.13
[Vuejs][VScode] 'v-slot' directive doesn't support any modifier.  (0) 2020.12.10
[Nuxtjs] ๋ฐฐํฌ ํ•  ๋•Œ console.log ํ•œ ๋ฒˆ์— ์ง€์šฐ๋Š” ๋ฐฉ๋ฒ•  (0) 2020.08.20
[Vuejs] Mdi(Material Design Icons) offline  (0) 2020.08.18
  1. v-html
'WEB/Vue.js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [Vue.js] Custom Directive
  • [Vuejs][VScode] 'v-slot' directive doesn't support any modifier.
  • [Nuxtjs] ๋ฐฐํฌ ํ•  ๋•Œ console.log ํ•œ ๋ฒˆ์— ์ง€์šฐ๋Š” ๋ฐฉ๋ฒ•
  • [Vuejs] Mdi(Material Design Icons) offline
S0PH1A
S0PH1A
๋ฐ˜์‘ํ˜•
S0PH1A
Web Programmer
S0PH1A
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
  • ์ „์ฒด
    • About Me
    • Python
      • Python
      • Django
    • DataBase
      • MySQL
      • MongoDB
    • JAVA
      • JAVA
      • Spring
    • WEB
      • JavaScript
      • HTML
      • CSS
      • Vue.js
      • React
      • Nest.js
      • Node.js
      • Electron
      • PHP
    • Linux
    • Algorithm
    • ๊ธฐํƒ€
    • ์ƒ๊ฐ
    • App
      • ReactNative

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • javascript
  • vue.js
  • Error
  • Python
  • vue
  • nodejs
  • electron
  • django
  • mysql
  • install

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

hELLO ยท Designed By ์ •์ƒ์šฐ.v4.2.2
S0PH1A
[Vuejs] v-html
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๊ฐœ์ธ์ •๋ณด

  • ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ
  • ํฌ๋Ÿผ
  • ๋กœ๊ทธ์ธ

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.