Vue

by jmpp77

HTML

<div id="app">

  <ul>
  <!--<todolist-item title="Nourrir le chat" :done="true"></todolist-item>
  <todolist-item title="Faire les courses" :done="true"></todolist-item>
  <todolist-item title="Apprendre Vue.js" :done="false"></todolist-item>-->
  
  <todolist-item v-for="todo in todos"
     :title="todo.title"
     :done="todo.done"
  ></todolist-item>
  
  </ul>

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav li {
  flex: 1;
  margin: 0.5rem;
}
nav li a {
  text-align: center;
  display: block;
  background-color: #a0a6aE;
  padding: 0.2rem 0;
  color: #fff;
  text-decoration: none;
  border-radius: 2px;
}

Vue

let TodolistItem = {
  props : {
  	title : {
    	type : [String, Number],
      required : true,
      validator : function(value) {
      	return value.length > 5;
      }
    },
    done : Boolean
  },
  template : `<li>
                <label>
                  <input type="checkbox" v-model="done">
                  {{ title }}
                </label>
              </li>`
};

new Vue({
  el: "#app",
  data: function() {
  	return {
    	todos : [
       { title: "Nourrir le chat", done: true },
       { title: "Apprendre les composants Vue", done: false },
      ]
    }
  },
  components: { TodolistItem }
})