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;
        }
  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

chenyou123_

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值