2021-9-6 前端達人
<!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
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務