<!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>天气案例</title>
<script type="text/javascript" src="../../../图片素材/vue.js"></script>
</head>
<body>
<!-- view层 模板 -->
<div id="root">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
:item="item" v-bind:index="index" v-on:remove="remvoeItems(Index)" :key="index"></todo-items>
</todo>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false
Vue.component("todo",{
template:'<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</div>'
});
Vue.component("todo-title",{
props:["title"],
template:"{{title}}
"
});
Vue.component("todo-items",{
props:["item","index"],
template:'<li>{{item}}---{{index}} <button @click="remove">删除</button></li> ' ,
methods: {
remove:function(index){
this.$emit("remove",index);
}
}
});
var vm=new Vue({
el:"#root",
data:{
title:"秦老师列表",
todoItems:["狂神说Java","狂神说前端","狂神说Linux"]
},
methods:{
removeItems:function(index){
console.log("删除了"+this.todoItems[index]+"OK");
this.todoItems.splice(index,1);
}
}
});
</script>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
