-
[Vue.js]Vue를 이용한 테이블 만들기 예제(+css)Languages/Vue.js 2021. 4. 8. 14:45반응형
프로그래밍 언어 년도별 순위를 vued와 css를 이용하여 테이블로 작성해보기
해당소스
<!DOCTYPE html> <html> <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"> <link rel="stylesheet" href="style.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>table ex</title> </head> <body> <h2> array used table ex</h2> <div id = "app"> <h3> 관심 받고 있는 언어 순위 </h3> <table> <thead> <th v-for = "item in header">{{item}}</th> </thead> <tbody> <tr v-for="line in ranking"> <td v-for="item in line">{{ item }}</td> </tr> </tbody> </table> </div> <script> new Vue({ el : '#app', data : { header: ["프로그래밍 언어","2018","2013","2008","2003","1998"] , ranking:[ ['java',1,2,1,1,16], ['c',2,1,2,2,1], ['c++',3,4,3,3,2], ['python',4,7,6,11,23], ['JS',17,18,8,7,20], ['Vue',10,15,28,45,100] ] } }) </script> <style> table{ width: 75%; text-align : left; } tanle th{ padding : 12px; border-bottom: 2px solid darkgray; } table td{ padding : 12px; } table tr:nth-of-type(even){ background-color: rgba(0,0,255,0.1); } </style> </body> </html>
실행결과
반응형'Languages > Vue.js' 카테고리의 다른 글
[Vue.js] 구글 차트 그리기 (0) 2021.05.13 [Vue.js]v-on이용해서 간단한 계산기 만들기 예제 (0) 2021.04.02 [Vue.js]v-bind/다양한 바인딩 만들기/뷰를 이용한 이미지 업로드/url 업로드/폰트크키/컬러지정 (0) 2021.04.02 [Vue.js]Vue예제 클릭한 횟수를 표시하는 버튼 +css (0) 2021.03.11 [Vue.js]Vue.js 의 시작/hello vue.js 만들기 (1) 2021.03.11