-
[Vue.js]v-bind/다양한 바인딩 만들기/뷰를 이용한 이미지 업로드/url 업로드/폰트크키/컬러지정Languages/Vue.js 2021. 4. 2. 14:18반응형
vue v-bind를 이용해서 바인딩 만들기예제
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link rel="stylesheet" href="style.css"> <title>속성</title> <style> .strike-through{ text-decoration: underline color:blue } .dark{ background-color: gray; </style> </head> <body> <h2>다양한 바인딩</h2> <div id = "app"> <p><a v-bind:href="myUrl">네이버로 연결</a></p> <hr> <img v-bind:src="fileName">이미지 표시</img> <p align="left">텍스트를 왼쪽 정렬</p> <p align="right">텍스트를 오른쪽 정렬</p> <p align="center">텍스트를 가운데 정렬</p> <p v-bind:style="{color:myColor}">인라인 스타일로 글자색을 빨간색으로</p> <p v-bind:style="{ color:myColor,'font-size': mySize }">인라인 스타일로 글자크기 150% 크게 빨간색으로</p> <p v-bind:style="{ color:myColor,'font-size': mySize, backgroundColor:myBackgroundColor }">인라인 스타일로 글자크기 150% 크게 빨간색으로 배경은 노란색으로</p> <div v-bind:class="myclass">blue-underline class 지정</div> <div v-bind:class="darkclass">blue-underline darkclass 지정</div> </div> <script> new Vue({ el : '#app', data : { myAlign : 'right', myAlign : 'left', myAlign : 'center', mySize : '150%' , myColor : '#FF0000' , myclass : 'underline-through', darkclass : 'dark' , myBackgroundColor : '#FFFF00', fileName : 'me1.png' , myUrl : 'http://www.naver.com' } }) </script> </body> </html>
실행결과
반응형'Languages > Vue.js' 카테고리의 다른 글
[Vue.js] 구글 차트 그리기 (0) 2021.05.13 [Vue.js]Vue를 이용한 테이블 만들기 예제(+css) (0) 2021.04.08 [Vue.js]v-on이용해서 간단한 계산기 만들기 예제 (0) 2021.04.02 [Vue.js]Vue예제 클릭한 횟수를 표시하는 버튼 +css (0) 2021.03.11 [Vue.js]Vue.js 의 시작/hello vue.js 만들기 (1) 2021.03.11