-
Notifications
You must be signed in to change notification settings - Fork 0
/
todo.html
64 lines (64 loc) · 1.19 KB
/
todo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<html>
<head>
<title>TODO-List</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
*{
margin:10px;
padding: 12px;
}
input{
width:70%;
font-size: 20px;
}
h1 {
color: orange;
}
li{
list-style-type: none;
background-color:#EFEFEF;
border-left:4px solid orange;
width:70%;
overflow: auto;
}
.btn{
float:right;
display: block;
padding:0;
margin:0;
}
</style>
</head>
<body>
<div id="myApp" >
<h1>Todo List</h1>
<input type="text" v-model="inputdata" placeholder="Enter here...">
<button @click="addData()">ADD</button>
<ul>
<li v-for="(x , index) in arr">{{x}}<p class="btn" @click="removeData(index)">x</p></li>
</ul>
</div>
<script>
var vm =new Vue({
el:'#myApp',
data:{
title:'TODO List',
inputdata:'',
arr:[]
},
methods:{
addData:function(){
if (this.inputdata){
this.arr.push(this.inputdata);
this.inputdata='';
console.log(this.arr);
}else alert("please Enter data");
},
removeData:function(indexVal){
this.arr.splice(indexVal,1);
}
}
})
</script>
</body>
</html>