- hi there we gonna make todo list with sample code in vue js *
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #app{ margin: 45px auto; background: white; width: 400px; padding: 10px; box-shadow: 0 0 8px 3px #2222221a; } .com { text-decoration: line-through; color: #fff; background: #11c170; } ul { padding: 0; margin: 0; } li { list-style: none; background: #fff; margin: 5px 0; padding: 18px; font-family: cairo; font-weight: 700; color: #11c170; border: 1px solid #11c170; } img{ width: 20%; } button { /* height: 20px; */ padding: 0; border-radius: 3px; float: right; border: 1px solid #11c170; margin-left: 5px; padding: 7px 2px; font-size: 12px; color: #fff; background: #11c170; } input[type="text"] { height: 36px; padding: 6px; margin: 30px 6px; width: 93%; border: 1px solid #eee; } .red , .res { background: red; height: 50px; width: 80px; margin: 20px auto; } .add { background: #fff; color: #11c170; padding: 20px; transform: translate(-143px,-19px); border: 4px solid; cursor: pointer; border-radius: 15px; box-shadow: 0 0 9px 3px #2222221a; } .vider { background: #fff; color: #6f6f6f; padding: 20px; transform: translate(-130px,-19px); border: 4px solid; cursor: pointer; border-radius: 15px; box-shadow: 0 0 9px 3px #2222221a; } .delete { background: #fff; color: red; padding: 20px; transform: translateY(-19px); border: 4px solid; cursor: pointer; border-radius: 15px; box-shadow: 0 0 9px 3px #2222221a; } button.add:hover { background: #11c170; color: #fff; transition: background .3s ease-in-out; } .vider:hover { background: #6f6f6f;; color: #fff; transition: background .3s ease-in-out; } .delete:hover { background: red; color: #fff; transition: background .3s ease-in-out; } .error { border-color: red !important; } button:disabled { color: #bfb9b9; cursor: not-allowed; } </style> </head> <body> <div id="app"> <ul v-if="todos"> <li v-for="(x,index) in todos" :class="x.doit ? 'com' : 'non'"> {{x.name}} <span>{{x.Duree}}</span> <button @click.prevent="rem(index)">Delete</button> <button @click.prevent="x.doit = !x.doit">Completed</button> </li> </ul> <form action=""> <label for="text"></label> <input v-model="titleTex" name="text" type="text" :class="!titleTex ? 'error' :'' "> <button @click.prevent="deleteAll" :disabled="todos.length <= 1" class="delete">Delete All</button> <button @click.prevent="titleTex = ''" class="vider">Vider</button> <button @click.prevent="send" class="add">Add</button> </form> </div> </body> </html> // ** Vue js Code **
// this file must be include from cdn <script src="vue.js"></script> Vue.component('applica',{ data : function(){ } }) var appa = new Vue({ el : '#app', data : { titleTex : "", doit: false, todos :[ {name : "Replier Emails",doit : false} ] }, methods : { send : function(){ if(this.titleTex != ""){ this.todos.push({name : this.titleTex,doit: false}); this.titleTex = ""; this.desc = ""; } }, rem : function(x){ this.todos.splice(x,1); }, doo : function(x){ this.todos[x].doit = !this.todos[x].doit; console.log(this.todos[x].name + this.todos[x].doit); }, deleteAll : function(){ this.todos = []; } }, computed : { }, watch : { } }) 
Top comments (0)