<body>
<div id='app'>
<input type="text" v-model="inputValue"/><br>
<input type="text" v-model:lazy="inputValue"/>
<button v-on:click="handleBtnClick">點擊</button>
<ul>
<todo-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'],
// template: "<li>{{content}}</li>",
// })
//區域組件
var TodoItem = {
props:['content','index'],
template: "<li @click='handleItemClick'>{{content}}</li>",
methods:{
handleItemClick:function(){
this.$emit("delete", this.index) //向父組件觸發事件
}
}
}
var app = new Vue({
el: '#app',
//注冊組件（區域組件）
components:{
TodoItem: TodoItem
},
data: {
list: [],
inputValue:''
},
methods: {
handleBtnClick: function () {
this.list.push(this.inputValue)
this.inputValuehttps://www.cnblogs.com/lfnumber7/p/= ''
},
handleItemDelete: function(index) {
this.list.splice(index,1)
}
}
})
</script>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/140914.html
標籤：JavaScript
上一篇：記一次筆試題