案例-todolist计划列表【上下移动】

<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:;" 一样的效果.