Vue设计一个简单日程表

简单日程表

1. css文件如下：

body{
    width: 1200px;
    height:800px;
    background: aquamarine;
}

#style1{
    position: fixed;
    top: 0;
    left: 40%;
    font-size: 30px;
    color: red;
}
#style2{
    position:absolute;
    top: 200px;
    left: 20%;
    width: 1100px;

}
#style3{
    position: relative;
    top: 30px;
    float: left;
    width: 200px;
    height: 30px;
    font-size: 20px;
}
#style4{
    position: relative;
    top: 30px;
    float: left;
    width: 100px;
    height: 35px;
}

#style5{
    position: relative;
    float: left;
    left: 50px;
    height: 300px;
    width: 200px;
    border: 2px solid red;
    background: white;
}

#style6{
    position:absolute;
    top:0px;
    width: 200px;
    right: 20%;
    height: 300px;
    background: white;
    border: 2px solid chartreuse;
}

2. html文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
<!--
--- 时间：2020.3.24---
--- 作者：lzh      ---
--- 介绍：一个简单日程表，记录今日需要做什么任务，以及已经完成了那些任务----
---
-->
    <meta charset="UTF-8">
    <title>Agenda</title>
<!--    此处引入的是vue框架中的js文件-->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    <!-- style1 为置顶中间位置-->
    <h1 id="style1" >What I have to do today!</h1>

<!--    style2表示对今日待办事务进行分块-->
    <div id="style2" class="ap1">


<!--      v-model绑定js变量或者对象-->
        <input id="style3" type="text" v-model="affair" >
        <button @click="add" id="style4" type="button" >增加事务</button>
<!--     ul，li用于V-for的渲染中

-->



        <ul id="style5">
            <h3>今日待办事务</h3>
            
<!--            其中affair为上面input所绑定的值，index为list数组的下标，list为一个数组，key设置关键字（index）
                           设置关键字是为了根据小标进行删除list数组的数据    
-->
            <div v-for="(affair,index) in list" :key="index">

<!--                这里相当于一个if条件句，判断该事务的状态是否未做-->
                <li v-if="affair.status==false">
                    <input type="checkbox" v-model="affair.status">
                    <span>{{affair.name}}</span>
                    <button @click="sub(index)" >删除</button>
                </li>
            </div>

        </ul>


        <ul id="style6">
            <h3>今日已办事务</h3>
            <!--            其中affair为上面input所绑定的值，index为数组的下标，key设置关键字-->
            <div v-for="(affair,index) in list" :key="index">

                <!--                这里相当于一个if条件句，判断该事务的状态是否已做-->
                <li v-if="affair.status==true">
                    <input type="checkbox" v-model="affair.status">

                    <span>{{affair.name}}</span>
                    <button @click="sub(index)" >删除</button>
                </li>


            </div>

        </ul>
    </div>

    <script type="text/javascript">
        var vm =new Vue({
            el:'.ap1',
            data:{
                affair:"",
                list:[],
            },
            methods:{
                //增加的函数
                add() {
                    if(this.affair.length>0){
                        //封装成一个对象，进行对多个属性操作
                        var event = {
                            name:this.affair,
                            status:false,
                        }
                        //向list列表插入元素，这里于java类似
                        this.list.push(event);
                    }
                    this.affair = '';
                },

                //删除的函数
                sub(index){
                    this.list.splice(index,1)
                }
            }
        })
    </script>




</body>
</html>

3. 效果图

结果代码展示图

这是我Vue的一个入门例子，遇到了很多问题，关键就是没有掌握vue的一些基本用法以及对于这个框架的内容了解比较少，思路就比较空缺。一开始的疑问是如何去设置动态的增加事务功能，又怎么记录输入框内容到事务中，并且实现删除功能。其次就是怎么使未完成和已完成相关联等等问题。

3 组件化

<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    --- 时间：2020.3.24---
    --- 作者：lzh      ---
    --- 介绍：一个简单日程表，记录今日需要做什么任务，以及已经完成了那些任务----
    ---
    -->
    <meta charset="UTF-8">
    <title>Agenda</title>
    <!--    此处引入的是vue框架中的js文件-->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
<h1 id="style1" >What I have to do today!</h1>
<div id="style2" class="ap1">
    <button-add :list='list' :affair='affair'></button-add>
    <no-do :list='list' :affair='affair'></no-do>
    <yes-do :list='list' :affair='affair'></yes-do>
</div>

<script type="text/javascript">
    Vue.component('button-add',{
        props: ['list','affair'],
        template: `
                <div>
                    <input id="style3" type="text" v-model="affair" >
                    <button @click="add" id="style4" type="button" >增加事务</button>
                </div>
            `,
        methods: {
            //增加的函数
            add() {
                if(this.affair.length>0){
                    //封装成一个对象，进行对多个属性操作
                    var event = {
                        name:this.affair,
                        status:false,
                    }
                    //向list列表插入元素，这里于java类似
                    this.list.push(event);
                }
                this.affair = '';
            }
        }
    })
    Vue.component('no-do',{
        props: ['list','affair'],
        template: `
                <ul id="style5">
                    <h3>今日待办事务</h3>
                    <div v-for="(affair,index) in list" :key="index">
                        <li v-if="affair.status==false">
                            <input type="checkbox" v-model="affair.status">
                            <span>{{affair.name}}</span>
                            <button @click="sub(index)" >删除</button>
                        </li>
                    </div>
                </ul>
            `,
        methods:{
            //删除的函数
            sub(index){
                this.list.splice(index,1)
            }
        }
    })
    Vue.component('yes-do',{
        props: ['list','affair'],
        template: `
                <ul id="style6">
                    <h3>今日已办事务</h3>
                    <div v-for="(affair,index) in list" :key="index">
                        <li v-if="affair.status==true">
                            <input type="checkbox" v-model="affair.status">

                            <span>{{affair.name}}</span>
                            <button @click="sub(index)" >删除</button>
                        </li>
                    </div>
                </ul>
            `,
        methods:{
            //删除的函数
            sub(index){
                this.list.splice(index,1)
            }
        }
    })
    var vm =new Vue({
        el:'.ap1',
        data:{
            affair:"",
            list:[]
        }
    })
</script>
</body>
</html>

原文链接：https://blog.csdn.net/lzh623015455/article/details/105078290

简单日程表

你可能也喜欢