-
vue 에서 문자열 html 코드를 읽게 하는 법Frontend 2021. 3. 16. 23:04반응형
vue에서 각각의 정보를 하나씩 읽어 화면에 표현하는 것 대신 미리 생성되어있는 html 코드를 바로 입력해주고 싶을때가 있다.
이럴때에는 간단하게 v-html 이라는 디렉티브를 사용하면 된다.
특히 이는 값이 html 코드 값이 DB 에 저장 되어 있어 String 형식으로 호출될 때 유용하다.
v-html 을 이용하게 되면 문자열로 되어있는 html 코드를 판단하여 바로 호출 가능하다.
예시는 아래와 같다. 실행 결과 css 까지 잘 입력 받는것을 확인 할 수 있다.
ex) test.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p v-html="htmlExample"></p> </div> </body> <script> new Vue({ el: "#app", data: { htmlExample: "<div class=\"test\">test</div>" } }) </script> <style> .test { color: red; } </style> </html>반응형'Frontend' 카테고리의 다른 글
javascript : for in vs for of 차이 (0) 2021.03.19 javascript Array 객체 foreach 사용법 (0) 2021.03.19 Javascript : 배열에서 특정 값 제거 하는 법 (0) 2021.02.17 Javascript : map 함수에서 return dictionary 형태로 받는 법 (0) 2021.02.17 Javascript : 다중 배열 합치는 법 (열 병합) (0) 2021.02.17