组件化开发todolist
<!doctype html>
组件化开发todolist
提前导入js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head><style>
.list_con{
width:600px;
margin:50px auto 0;
}.inputtxt{ width:550px; height:30px; border:1px solid #ccc; padding:0px; text-indent:10px; } .list{ margin:0; padding:0; list-style:none; margin-top:20px; } .list li{ height:40px; line-height:40px; border-bottom:1px solid #ccc; } .list li span{ float:left; } .list li a{ float:right; text-decoration:none; margin:0 10px; }</style>
<body>
<div id="app">
<todolist></todolist>
</div></body>
<script src="js/vue.js"></script>
<script>
Vue.component("todolist",{
template:`<div class="list_con">
<h2>To do list</h2>
<input type="text" id="txt1" class="inputtxt" v-model="message">
<input type="button" name="" value="增加" id="btn1" class="inputbtn" @click="add"><ul id="list" class="list"> <li v-for="item,key in todolist"> <span>{{item}}</span> <a href="javascript:;" @click="up(key)">↑</a> <a href="javascript:;" @click="down(key)">↓</a> <a href="javascript:;" @click="del(key)">删除</a></li>
</ul>
</div>`,
data(){
let todolist = JSON.parse(window.localStorage.todolist);
return{
message:"",
todolist:todolist
}
},
methods:{
add(){
if(this.message=""){
alert("内容不能为空！！！")
}else{
this.todolist.push(this.message);
window.localStorage.todolist = JSON.stringify(this.todolist);
location.reload()
}
},
del(key){
this.todolist.splice(key,1);
window.localStorage.todolist = JSON.stringify(this.todolist);
location.reload()
},
up(key){
if(key=0){
return false
}else{
let ret = this.todolist.splice(key,1)[0];
window.localStorage.todolist = JSON.stringify(this.todolist);
this.todolist.splice(key-1,0,ret);
window.localStorage.todolist = JSON.stringify(this.todolist);
location.reload()
}}, down(key){ let ret = this.todolist.splice(key,1)[0]; window.localStorage.todolist = JSON.stringify(this.todolist); this.todolist.splice(key+1,0,ret); window.localStorage.todolist = JSON.stringify(this.todolist); location.reload() } } }); var vm = new Vue({ el:"#app", data(){ return{} } })</script>
</html>
