vue完成一个简单的todo-list

基本展示：
没有任何发布时：

点击“Go！”发布计划：

点击“待完成”，

代码展示：
html:
这里我用的绘制页面样式框架为Bootstrap ，直接使用BootstrapCDN 提供的链接。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

	<div id="app">
        <div class="row todoList">
            <div class="col-lg-12">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="请输入您的今日计划~" v-model.trim="plan">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" @click="go">Go!</button>
                    </span>
                </div><!-- /input-group -->
			//   使用v-if  根据条件数组的长度为0（当前没有任何计划）
                <ul class="list-group" v-if="todoList.length==0">
                    <li class="list-group-item">暂无内容</li>
                </ul>
			//   使用v-else（当前有发布计划）
                <ul class="nav nav-pills nav-stacked" v-for="(item,index) in todoList" v-else>
                //  动态绑定class  计划状态变成true时，加上类名liFinished，给li添加下划线
                    <li class="list-group-item" :class="item.finished? 'liFinished':''  ">
                        {{item.content}}
                        <div class="pull-right">
                            <button type="button" class="btn btn-xs btn-danger float" @click="del(index)">删除</button>
                        </div>

                        <div class="pull-right">
                            <button type="button" class="btn btn-xs btn-default float" @click="status(index)" :disabled="item.finished">
                            //  三目运算 根据当前计划完成状态改变按钮的提示文字
                                {{item.finished?'已完成':'待完成'}}
                            </button>
                        </div>
                        
                    </li>
                </ul>
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </div>

vue代码：

	<script>
        const vm=new Vue({
            el:'#app',
            data:{
             //  定义一个数据用来和输入框绑定，vue的v-model双向绑定哦！
                plan:'',
             //  定义一个数组，用来保存发布的计划数据
                todoList:[

                ]
            },
            methods:{
            //  发布：
                go(){
                // 添加的时候，添加进一个对象，有两个属性：第一个用来显示输入的具体计划，第二个可以用来控制计划完成的状态。自定义是false，代表未完成。
                    this.todoList.push({
                        content:this.plan,
                        finished:false
                    })
                    this.plan=''
                },
                //  删除：
                del(index){
                //  根据下标删除数组中对应的数据  splice（删除数组的下标，删除的个数）
                    this.todoList.splice(index,1)
                },
                //  改变状态，这个计划从“待完成”变成“已完成”
                status(index){
					//  this.todoList[index].finished状态为真 “完成了”  为假  “未完成”
                    this.todoList[index].finished=true
                }
            }
        })
    </script>

css代码：

	#app{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 200px;
        }
        .todoList{
            width:600px
        }
        .liFinished{
        //  添加删除线
            text-decoration: line-through;
        }