vue小demo0

時間 2019-11-18
標籤 vue demo0 demo 简体版
原文原文鏈接
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .container{
        width: 100vw;
        padding: 10px 10vw 0 10vw ;
    }
.title1,.title2{
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    margin: 10px 0;
}
.addPlan_item{
    width: 80vw;
    height: 30px;
    margin-bottom: 20px;
}
    .addPlan{
        width: calc(80vw - 100px);
        height: 30px;
        border-radius: 5px;
        font-size: 14px;
        outline: none;
        border: 1px solid #ccc;
        padding-left: 20px;
        box-sizing: border-box;

    }
    .add{
        width: 200px;
        height: 40px;
        font-size: 18px;
        color: #fef6ff;
        background: #f0a742;
        margin-left: calc(40vw - 100px);
        margin-bottom: 20px;
        border: 1px solid #e0e0e0;
        border-radius: 5px;
        box-sizing: border-box;
        cursor: pointer;
    }
    .plan_details{
        width: 80vw;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        margin-bottom: 20px;
    }
    .plan_details p:nth-of-type(1){
        width: 100px;
        height: 30px;
        line-height: 30px;
        color: red;
    }
    .plan_details p:nth-of-type(2){
        width: 360px;
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
    }
    .plan_details p:nth-of-type(2)>span{
        display: inline-block;
        width: 100px;
        height: 30px;
        border: 1px solid #ccc;
        border-radius: 5px;
        text-align: center;
    }
    ul li{
        width: 80vw;
        height: 30px;
        font-size: 14px;
    }
    .item{
        width: 80vw;
        height: 30px;
        display: flex;
        justify-content: flex-start;
    }
    .item input{
        display: inline-block;
        width: 30px;
        height: 30px;
    }
    .item span:nth-of-type(1){
        display: inline-block;
        width: calc(80vw - 60px);
        height: 30px;
        line-height: 30px;
        padding-left: 20px;
        box-sizing: border-box;
    }
    .item span:nth-of-type(2){
        display: inline-block;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
    }
    .item_bg{
        background: #e0e0e0;
    }
    .editPlan{
        width:  calc(80vw - 60px);
        height: 30px;
        padding-left: 20px;
        box-sizing: border-box;
        position: relative;
        left: 30px;
        top:-30px;
        display: none;
    }
</style>
<body>
<div class="container">
    <p class="title1">添加任務</p>
    <div class="addPlan_item">
        <label>計劃內容：</label>
        <input type="text" class="addPlan planBody" placeholder="例如:吃飯睡覺打豆豆">
    </div>
    <div class="addPlan_item">
        <label>計劃期限：</label>
        <input type="text" class="addPlan planDate" placeholder="例如:吃飯睡覺打豆豆">
    </div>
    <button class="add" @click="addPlan">添加</button>
    <div class="plan_details">
        <p>
            {{getPlanUnComplete}}個任務未完成
        </p>
        <p>
            <span>全部任務:{{getPlanSum}}個</span>
            <span>未完成任務:{{getPlanUnComplete}}個</span>
            <span>完成任務:{{getPlanComplete}}個</span>
        </p>
    </div>
    <p class="title2">任務列表</p>
    <ul id="ul">
        <div v-if="planDataLen">
            <li v-for="(item,index) in planData">
                <div class="item" :class="{item_bg:item.isComplete}">
                    <input type="checkbox" @click="editComplete($event)" v-model="item.isComplete">
                    <span @dblclick="showEdit(index)">{{item.title}}:&nbsp&nbsp&nbsp&nbsp{{item.date}}</span>
                    <span @click="deleltePlan($event,index)">X</span>
                </div>
                <input type="text" class="editPlan" @keyup.enter="editPlan($event,index)" :value="item.title">
            </li>
        </div>
    </ul>
</div>
<script src="js/vue.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    var app = new Vue({
        el: '.container',
        data:{
            planData:[
//                {
//                    title:'吃飯',
//                    date:'2018-6-12',
//                    isComplete:false
//                }
            ],
            complete:0,
            uncomplete:0,
            sum:0
        },
        computed:{
            planDataLen:function () {
                return this.planData.length>0?true:false
            },
            getPlanComplete:function () {
                var completePlan=this.planData.filter(function (p1) {
                    return p1.isComplete
                })
                var planSum=this.planData.length;
                this.complete=planSum-completePlan.length;
                return completePlan.length
            },
            getPlanUnComplete:function () {
                var unCompletePlan=this.planData.filter(function (p1) {
                    return !p1.isComplete
                })
                var planSum=this.planData.length;
                this.uncomplete=unCompletePlan.length;
                return unCompletePlan.length
            },
            getPlanSum:function () {
                this.sum=this.planData.length;
                return this.planData.length
            },
            isSelect:function () {

            }
        },
        methods:{
            addPlan:function () {
            var planBody=$('.planBody').val(),
                planDate=$('.planDate').val();
            if(planBody==""||planDate==""){
                alert('請輸入計劃的事情和完成期限')
                return
            }
            this.planData.push({
                title:planBody,
                date:planDate,
                isComplete:false
            })
            },
            editComplete:function (e) {
                var index=$(e.target).parent().parent().index();
                if($(e.target).prop('checked')){
                    this.planData[index].isComplete=true;
                }else {
                    this.planData[index].isComplete=false;
                }
            },
            deleltePlan:function (index) {
                this.planData.splice(index,1);
            },
            showEdit:function (index) {
                $('#ul li').eq(index).find('.editPlan').show();

            },
            editPlan:function (event,index) {
                this.planData[index].title=$(event.target).val();
                $(event.target).hide();
            }
        }
    })
</script>
</body>
</html>```
1. VUE小小基礎
2. vue 小知識
3. vue 小技巧
4. Vue Slot小記
5. vue小demo
6. vue-amap小結
7. Vue小技巧
8. vue小技巧
9. VUE 小demo
10. VUE 小點 1
更多相關文章...
• MySQL FLOAT、DOUBLE、DECIMAL（小數類型） - MySQL教程
• PHP NULL 合併運算符 - PHP 7 新特性
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 算法總結-歸併排序
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。