如何实现图三的效果，求解决

图一和图二是源码和效果图，想实现打勾后文字发生变化的效果（如图三）怎样解决，请帮忙修改源码，谢谢。

img

img

img


https://www.jianshu.com/p/5421cebce523

这个建议 自己 完成 ，todolist是 vue的 入门案例 ，会写这个 说明对vue 已经有很好的掌握了
而且 百度一下就有 。

每个人都需要 经历这个

img


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@next"></script>
    <title>Document</title>
    <style>
        .checkedSpan{
            color:#aaa;
            text-decoration:line-through;
        }
    </style>
</head>
<body>
    <h1>任务列表</h1>
    <div id="app">
        <input type="text" v-model="todo">
        <button v-on:click="handleBtnClick">增加任务</button>
        <li v-for="(item,key) in list" :key="index">
            <input type="checkbox" v-model="item.checked">
            <span :class="{checkedSpan:item.checked}">{{item.todo}}</span>
            <button v-on:click="removeData(key)">移除任务</button>
        </li>
    </div>
</body>
<script>
    const app = {
        data(){
            return {
                list: [],
                todo:''
            }
        },
        methods:{
            handleBtnClick:function(){
                this.list.push({todo:this.todo,checked:false});
                this.todo = ""
            },
            removeData(key){
                this.list.splice(key,1)
            }
        }
    }
    Vue.createApp(app).mount("#app");
</script>
</html>