<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Todolist</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<div>
<input v-model="txtValue">
<button type="button" @click="handleSubmit">提交</button>
<ul>
<li v-for="(item,index) of list"
:key="index"
:index="index" @click="deleteItem(index)" //传递下标值 >
{{item}}
</li>
</ul>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello Vue!!',
txtValue: '',
list: []
},
methods: {
handleSubmit: function () {
this.list.push(this.txtValue)
this.txtValue =''
},
deleteItem: function (index) {
//alert(index)
this.list.splice(index,1) //通过下标删除 }
}
})
</script>
</body>
</html>
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
来源：csdn
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务