极客观点
项目管理
HarmonyOS
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<style>
ul li {
list-style: none;
}
.done {
text-decoration: line-through;
color: indianred;
}
</style>
<body>
<div id="app">
<div>
<p>3 of {{todo.length}} remaning[arctive]</p>
<ul>
<li v-for="(item,index) of todo" :key="item.index">
<input type="checkbox" v-model="item.done">
<span :class="{done:item.done}">{{item.id}}---{{item.content}}</span>
<button @click="deleteClick(index)">X</button>
</li>
</ul>
</div>
<input type="text" v-model="todoText" @keydown.enter="addToClick">
<button @click="addToClick">增加</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
todoText: '',
todo: [
{id: 1, content: "FOO", done: true},
],
},
methods: {
addToClick: function () {
if (this.todoText === "") {//非控验证
return
}
this.todo.push({
id: this.todo[this.todo.length - 1].id + 1,
content: this.todoText.trim(),
done: false
});
this.todoText = "";
},
deleteClick: function (index) {
console.log(index);
this.todo.splice(index, 1);
}
}
})
</script>
</body>
</html>
有个需求：
当我点击第8个的时候，删除掉，后面的9,10,11变成8,9,10.以此类推。在点击事件deleteClick需要重新渲染？
请教下哪位经验丰富的朋友。谢谢
{{item.id}}---{{item.content}}
这个地方改成
{{index+1}}---{{item.content}}