在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue 實(shí)現(xiàn)的TodoList問題

vue 實(shí)現(xiàn)的TodoList問題

代碼如下：

<!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 === "") {//非控驗(yàn)證
                    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>

有個需求：

clipboard.png
當(dāng)我點(diǎn)擊第8個的時候，刪除掉，后面的9,10,11變成8,9,10.以此類推。在點(diǎn)擊事件deleteClick需要重新渲染？
請教下哪位經(jīng)驗(yàn)豐富的朋友。謝謝

回答
編輯回答
醉淸風(fēng)

v-for=“{value，key，index} in object”

2018年7月3日 17:45
編輯回答
安若晴

{{item.id}}---{{item.content}}

這個地方改成

{{index+1}}---{{item.content}}

2017年6月21日 15:46