<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 定义标签 -->
<div id="app">
<span>{{message}}</span>
<input type="text" name="todoitem" v-model="newitem"> <button @click="add">添加</button>
<hr>
<ul>
<li v-for="(item,index) in items">
<a href="javascript:;" @click="up(index)">↑</a> {{item}} <a href="javascript:;" @click="deleteitem(index)">删除</a> <a href="javascript:;" @click="down(index)">↓</a>
</li>
</ul>
</div>
</body>
<!-- 初始化vue -->
<script type="text/javascript">
var vm = new Vue({
// el 接管 html
el:'#app',
//data 绑定数据
data:{
message:'hello ',
items: ['学习html','学习python','mysql'],
newitem:''
},
// 绑定的事件
methods:{
add:function(){
this.items.push(this.newitem);
this.newitem='';
},
deleteitem:function(index){
// alert(index)
this.items.splice(index, 1);
},
up:function(index){
// 1.获取当前的元素
current=this.items[index]
// 2.先把当前的元素删除
this.items.splice(index, 1)
// 3.再添加,添加的时候让它的索引-1
this.items.splice(index-1, 0,current)
},
down:function(index){
// 1.获取当前的元素
current=this.items[index]
// 2.先把当前的元素删除
this.items.splice(index, 1)
// 3.再添加,添加的时候让它的索引+1
this.items.splice(index+1, 0,current)
}
}
})
</script>
</html>
