<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="inputValue"/>
<button v-on:click="clickSB">提交</button>
</div>
<ul>
<!-- 父组件向子组件用属性传值 -->
<item v-for="(item,index) of list"
:content="item"
:index="index"
@delete="del"></item>
<!-- <li v-for="(item,index) of list">
{{item}}<span v-on:click="del(index)">delete</span>
</li> -->
</ul>
</div>
<script>
Vue.component("item",{
props:{
content : String,
index : Number
},
template : "<li>{{content}}<span @click='del'>delete</span></li>",
methods:{
del :function(){
this.$emit('delete',this.index);
}
}
})
var vm = new Vue({
el :"#app",
data:{
inputValue:"",
list :[]
},
methods:{
clickSB:function (){
this.list.push(this.inputValue);
this.inputValue="";
},
del:function(index){
this.list.splice(index,1);
}
}
})
</script>
</body>
</html>