vue练习 简易记事本
效果图：
（我觉得好丑）
在输入框输入完成后，回车就可以增加内容，主要是练习了v-on v-if v-for v-model等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../vue/vue (3).js"></script>
<style>
/* 通用的css文件 */
/* 基本的化 */
*{margin:0;padding:0;}
a{ text-decoration:none; color:#464646;}
img{display:block}
ul{list-style:none}
body{font-family:Arial;}
h1,h2,h3{font-size: 16px;}
body{font-family: Arial,'宋体';} /* 字体 */
body{margin: 0 auto;max-width: 600px;}
h2{text-align: center;font-size: 50px;}
#main{margin: 0 auto;width: 400px;border: 1px solid slateblue;}
input{margin: 0 auto;width: 400px;height: 30px;display: block;border: 1px solid slateblue;}
div ul{list-style:none;}
div ul{display: block;width: 400px;margin: 0 auto;}
div ul li{width: 400px;height: 30px;}
.rig{float: right;}
</style>
</head>
<body>
<h2>简易记事本</h2>
<div id="main">
<input type="text" placeholder="请输入" v-model="mes" @keyup.enter="add" >
<ul>
<li v-for="(item,index) in list">{{index+1}}. {{item}}<button class="rig" @click="remove(index)">删除</button></li>
</ul>
<div v-if="list.length!=0">
{{list.length}}个待做事项
<button class="rig" @click="clear">清空</button>
</div>
</div>
<script>
new Vue({
el:"#main",
data:{
list:["写代码","踩踩踩","sssssss"],
mes:""
},
methods:{
add:function(){
this.list.push(this.mes);
},
remove:function(index){
this.list.splice(index,1);
},
clear:function(){
this.list=[];
}
}
})
</script>
</body>
</html>
