<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" v-model="inputValue" />
<button v-on:click="handleBtnClick">提交</button>
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<todo-item v-bind:content="item"
v-bind:content="item"
v-bind:index='index'
v-for="(item,index) in list"
@delete="handleItemDelete">//使用关联事件
</todo-item>
</ul>
</div>
<script>
Vue.component("TodoItem",{//创建组件
props:['content','index'],//访问关联组件
template:"<li @click='handleItemClick'>{{content}}</li>",//@click等于v-on:click
methods:{
handleItemClick:function(){
this.$emit("delete",this.index);//注册事件
}
}
})
// var TodoItem = {
// props:['content'],
// template:"<li>{{content}}</li>"
// methods:{
// handleItemClick: function(){
// // this.$emit("delete",tihs.index);
// alert("click")
// }
// }
// }
var app=new Vue({
el:'#root',
data:{
list:[55],
inputValue:''
},
methods:{
handleBtnClick:function(){
this.list.push(this.inputValue)//如果按钮点击，出发增加集合元素，同时清除输入框
this.inputValue=''
},
handleItemDelete:function(index){//触发关联事件时触发方法
this.list.splice(index,1)//删除一个元素，从index开始，删除1个
}
}
})
</script>
</body>
</html>