小罗的记事本
Vue2 案例一
我学完了Vue前端框架，被他的强大完全迷住，觉得之前学的前端三件套完全白雪了。虽然他们确实加深了我对前端整个框架的理解，但是时间的付出和我得到的收获确实没有成正比。用上了Vue框架能让你在更短的时间里用更精简的代码写出更优美的前端页面。主打一个优雅。
代码：
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../fronttools/vue.js"></script>
</head>
<body>
<div id="app">
<h1 style="text-align: center;">小罗的记事本</h1>
<input type="text" v-model="Writetext"> <button @click="add">添加</button>
<ul v-for="it in arr">
<li >{{it.name}} <button @click="del(it.id)">删除</button></li>
</ul>
</div>
</body>
<script>
new Vue({
el:"#app",
data: {
Writetext: "",
arr:[
{id:1,name : "跑步1公里"},
{id:2,name : "刷力扣题爽两个小时"}
]
},
methods: {
del(id){
this.arr=this.arr.filter(it=>it.id!=id);
},
add(){
if(this.Writetext.trim()==''){
alert("请输入事件")
return
}
this.arr.push(
{id: +new Date(),name: this.Writetext}
)
this.Writetext=""
}
},
})
</script>
</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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随身记</title>
<script src="../fronttools/vue.js"></script>
</head>
<body>
<div id="app">
<h1 style=" text-align: center;">小罗的记事本</h1>
<table border="1" cellspacing="0" align="center" style="width: 500px;">
<tr>
<td> 请输入：<input type="text" style="width: 300px; background-color: rgb(199, 241, 241);" v-model="Writetext" > <button style="float: right;" @click="add">添加</button></td>
</tr>
<tr v-for="(it,index) in arr">
<td >{{index+1}}.{{it.name}} <button style="float: right;" @click="del(it.id)">删除</button></td>
</tr>
</table>
<!-- eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee -->
<!-- <h1 style="text-align: center;">小罗的记事本</h1>
<input type="text" v-model="Writetext"> <button @click="add">添加</button>
<ul v-for="it in arr">
<li >{{it.name}} <button @click="del(it.id)">删除</button></li>
</ul> -->
</div>
</body>
<script>
new Vue({
el:"#app",
data: {
Writetext: "",
arr:[
{id:1,name : "跑步1公里"},
{id:2,name : "刷力扣题爽两个小时"}
]
},
methods: {
del(id){
this.arr=this.arr.filter(it=>it.id!=id);
},
add(){
if(this.Writetext.trim()==''){
alert("请输入事件")
return
}
this.arr.push(
{id: +new Date(),name: this.Writetext}
)
this.Writetext=""
}
},
})
</script>
</html>
|
