<div class="list_con" id="todolist">
<h2>To do list</h2>
<input type="text" v-model="text" id="txt1" class="inputtxt">
<input type="button" name="" value="增加" id="btn1" class="inputbtn" @click="add">
<ul id="list" class="list">
<li v-for="data,key in data_list">
<span>{{data}}</span>
<a href="" class="up" @click.prevent="up(key)">↑</a>
<a href="" class="down" @click.prevent="down(key)">↓</a>
<a href="" class="del" @click.prevent="del(key)">删除</a>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:"#todolist",
data:{
text:"",
data_list:[
"学习html",
"学习css",
"学习js",
]
},
methods:{
add(){
if(this.text==""){
return false
}
this.data_list.push(this.text);
this.text="";
},
del(key){
// 删除计划
// 数组.splice(开始下标,删除个数,替换内容1,替换内容2)
this.data_list.splice(key,1)
},
up(key){
//向上移动
if(key==0){
return false
}
let content = this.data_list.splice(key,1)[0];
// console.log(key,content)
// console.log(this.data_list)
this.data_list.splice(key-1,0,content);
},
down(key){
//向下移动
let content = this.data_list.splice(key,1)[0];
this.data_list.splice(key+1,0,content);
}
}
})
</script>
使用在点击方法后加上 .prevent 阻止浏览器自动刷新，作用和上面的标签加上<a href="javascript:;" 一样的效果.
