六.todolist练习

最新推荐文章于 2023-10-11 23:06:22 发布

奥D

最新推荐文章于 2023-10-11 23:06:22 发布

阅读量203

点赞数 1

分类专栏：笔记 vue 文章标签： vue

本文链接：https://blog.csdn.net/iloadj/article/details/109638739

版权

笔记同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

vue

24 篇文章 0 订阅

订阅专栏

todolist笔记

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href=" ">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
</head>
<style>
    [v-cloak]{
        display: none;
    }
</style>
<body>
    <!-- 
        基本思路:
        1.布局
        2.数据绑定
        3.绑定事件
     -->
    <div id="app">
        <div id="header" style="max-width:600px;margin-top:30px" class="center-block" >
          <h2>今日事、今日毕</h2>
          <div class="row">
            <div class="col-md-9 col-sm-9">
                <input type="text" v-model.trim="inputTxt" class="form-control">
            </div>
            <div class="col-md-3 col-sm-3">
                <!-- 6.绑定增加事件 -->
                <button class="btn btn-success"
                    @click="addTodo"
                >增加事项</button>
            </div>
          </div>
        </div>
        <div id="body" class="center-block" style="max-width:600px;margin-top:30px">
            <ul class="list-group">
                <!-- 5.无数据时显示，数据绑定结束 -->
                <li class="list-group-item text-center" v-if="!todos.length">
                    暂无待办事项，请添加
                </li>
                <!-- 2.给li标签设置循环，并且给循环中加入key，保证每一个元素的独一无二 -->
              <li 
                v-cloak
                v-for="(todo,index) in todos"
                :key="index"
                class="list-group-item clearfix"
              >
                <!-- 3.将渲染数据的内容 -->
                <p class="pull-left">{{todo.content}}</p>
                <div class="pull-right">
                <!-- 4.将按钮内容动态显示 
                :disabled属性，true时不可用，单独写也不可用-->
                <!-- 9.点击完成事件①需要条件 -->
                  <button 
                    @click="setState(index)"
                    :disabled="todo.isCompleted"
                    class="btn btn-primary btn-xs">{{todo.isCompleted?"已完成":"点击完成"}}</button>
                    <!-- 8.删除事件的绑定 -->
                  <button 
                    @click="delTodo(index)"
                    class="btn btn-danger btn-xs">删除</button>
                </div>
              </li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="./vue.js" ></script>
<script type="text/javascript">
    const vm = new Vue({
        el:"#app",
        data:{
            //1.双向绑定input标签内容，同获取input value值。
            inputTxt:'',
            todos:[
                {
                    content:"哈哈哈哈"
                    ,isCompleted:false
                }
            ]
        },
        methods:{
            addTodo(){
               //⭐7.添加备忘录 ,添加时做个判断，内容为空时
               if(!this.inputTxt){
                   alert("请输入内容")
                   return
               }
               //但此时输入空格还是能添加,vue提供了.trim方法,自动去除空格
               this.todos.unshift({
                   content:this.inputTxt,
                   isCompleted:false
               })
            },
            // 8.删除事件:①要条件②要提示
            delTodo(index){
                if (confirm("确定要删除吗?")) {
                    this.todos.splice(index,1)
                }
            },
            // 9.点击完成事件:
            setState(index){
                this.todos[index].isCompleted=true
            }
        }
    })
</script>
</html>