[TODO] table, Style object

기존 이미지

오늘은 스타일을 조금 수정했다.

<!-- src/components/Todo/Todo.html -->
 <table>
   <thead :style="styleThead">
     <tr>
       <th>
         <input type="checkbox">
       </th>
       <th>name</th>
       <th>todo</th>
     </tr>
   </thead>
   <tbody :style="styleTbody">
     <tr v-for="item in todos">
       <td>
         <input type="checkbox" :value="item.name">
       </td>
       <td>{{item.name}}</td>
       <td>{{item.todo}}</td>
     </tr>
   </tbody>
</table>

기존에 쓰고 있던 <ul> <li> 태그 대신 <table> 태그를 사용했다.
그리고 <checkbox> 태그도 추가했다.
아직 어떻게 쓸지 정확하게 생각하진 않았는데 필요할거 같아서 일단 넣음.

//src/components/Todo/Todo.html

// Style
styleThead: object = {
    color: 'red'
}

styleTbody: object = {
    color: 'blue'
}

css에 대한 욕심이 있어서 bootstrap을 쓸까 하다가 일단 직접 해보기로 했다.
css 적용 어떻게 하는지 몰라서 적용되는지 테스트만 해보려고 color 값만 줬다.
vue에서는 style을 위처럼 객체로 사용해서 바인딩해서 쓸 수 있다고 한다.
참고 : 클래스와 스타일 바인딩

 

<!-- src/components/Todo/Todo.html -->
 <table>
   <thead :style="styleThead"> <!-- add -->
     <!-- ... -->
   </thead>
   <tbody :style="styleTbody"> <!-- add -->
     <!-- ... -->
   </tbody>
</table>

style에 생성한 스타일 오브젝트 바인딩 해주면된다.

결과.

색이 잘 들어간걸 확인할 수 있다.

 

---

참고 깃허브 : [TODO] use table, style object