VUE簡易案例一

時間 2019-11-08

標籤 vue 簡易案例简体版

原文原文鏈接

效果圖javascript

一、綁定DOM屬性，輸出數據
二、點擊事件綁定
三、過濾器filters應用
四、監視器watchphp

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        html,body{height: 100%}
        body{ font-family: "微軟雅黑" }
        *{padding: 0;margin:0;}
        img{max-width: 100%}
        ul,li{list-style: none}
        .app{min-height: 100%; color: #333;background-size: cover;}
        .con{height: 100%;width: 1000px;margin: 0 auto; overflow: hidden;}
        .img{width: 400px;float: left;margin-top: 80px}
        .txt{float: right;width: 450px;padding: 80px 0}
        .title{height: 80px;font-size: 18px; border:10px double #000; background: #fff;text-align: center; line-height: 60px; box-sizing: border-box; box-shadow: 0 15px 30px rgba(0,0,0,0.1);}
        .txt ul li{padding:10px 0;margin:20px 0; transition: all 400ms;cursor: pointer; background-image: url(images/bg_w.png); font-weight: 700}
        .txt ul li p{ color: #fff;font-size: 12px; font-weight: 100}
        .txt ul li:hover{    -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);   box-shadow: 0 15px 30px rgba(0,0,0,0.1); -webkit-transform: translate3d(0, -2px, 0); transform: translate3d(0, -2px, 0);}
        .add{color: #666;line-height: 50px; text-align: center;cursor: pointer; margin-top: 50px}
        .addsign{text-align: center;}
        .pink{ background-image: url(images/pink.jpg); }
        .pinktitle{border-color:  #FC7FB6;}
        .pink ul li{ text-indent: 20px; border-radius: 2px}
        .pink ul li:nth-child(odd){background-color: #FC7FB6}
        .pink ul li:nth-child(even){background-color: #FFBBE1}

        .green{ background-image: url(images/green.jpg); }
        .greentitle{border-color:  #1FAB89;}
        .green ul li{ text-indent: 20px; border-radius: 2px}
        .green ul li:nth-child(odd){background-color: #62D2A2}
        .green ul li:nth-child(even){background-color: #9DF3C4}

        .blue{ background-image: url(images/blue.png); }
        .bluetitle{border-color: #0E7CF4 ;}
        .blue ul li{ text-indent: 20px; border-radius: 2px}
        .blue ul li:nth-child(odd){background-color:#0AA0F6}
        .blue ul li:nth-child(even){background-color:  #0E7CF4}

        .pinkpic{ background-image: url(images/pink2.jpg); }
        .pinkpictitle{border-color:  #FFBEE3;}
        .pinkpic ul li{ text-indent: 20px; border-radius: 2px}
        .pinkpic ul li:nth-child(odd){background-color: #FFBEE3}
        .pinkpic ul li:nth-child(even){background-color: #FC5BB6}

        .greenpic{ background-image: url(images/green2.jpg); }
        .greenpictitle{border-color:  #475762;}
        .greenpic ul li{ text-indent: 20px; border-radius: 2px}
        .greenpic ul li:nth-child(odd){background-color: #ECEFF4}
        .greenpic ul li:nth-child(even){background-color: #475762}

        .bluepic{ background-image: url(images/blue2.jpg); }
        .bluepictitle{border-color: #7098DA ;}
        .bluepic ul li{ text-indent: 20px; border-radius: 2px}
        .bluepic ul li:nth-child(odd){background-color:#7098DA}
        .bluepic ul li:nth-child(even){background-color:  #6EB6FF}
    }

    </style>
</head>
<body>
    <div class="app" id="app" v-bind:class="skin_f" :style="{backgroundColor:bgcolor}">
        <div class="con">
            <div class="img">
                <img v-bind:src="imgurl" width="400" />
            </div>
            <div class="txt">
                換膚時間：{{now | formatTime}}
                <div class="title" v-bind:class="title">柚子的Vue換膚</div>
                <ul>
                    <li v-for="(skinitem,index) in skin" v-on:click="getskin(index)">
                    {{skinitem.name}}
                    <p>{{skinitem.key}}<p>
                    </li>
                </ul>
                <div class="add" v-if="!message" v-on:click="moreskin">加載更多...</div>
                <div class="addsign" v-if="message"><img src="images/end.png"></div>
            </div>    
        </div>
    </div>
</body>
</html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            message:false,
            skin_f:"green",
            imgurl:"images/con_green2.jpg",
            title:"greentitle",
            bgcolor:"green",
            now:new Date(),
            skin:[
                {"name":"粉色紋理背景",
                 "key":"pink",
                 "imgurl":"images/con_pink2.png",
                 "bgcolor":"pink"
                },
                {"name":"綠色紋理背景",
                 "key":"green",
                 "imgurl":"images/con_green2.jpg",
                 "bgcolor":"green"
                }
                ,
                {"name":"藍色紋理背景",
                 "key":"blue",
                 "imgurl":"images/con_blue2.jpg",
                 "bgcolor":"#2AA2F9",
                }
            ],
            skinmore:[
                {"name":"粉色圖片背景",
                 "key":"pinkpic",
                 "imgurl":"images/con_pinkp2.png",
                 "bgcolor":"pink"
                },
                {"name":"綠色圖片背景",
                 "key":"greenpic",
                 "imgurl":"images/con_greenp2.jpg",
                 "bgcolor":"green"
                },              ,
                {"name":"藍色圖片背景",
                 "key":"bluepic",
                 "imgurl":"images/con_bluep2.png",
                 "bgcolor":"#2AA2F9"
                }
            ]
        },
        watch:{
            skin:function(){
                this.message=true;
            },
            skin_f:function(){              
                this.now=new Date();
            }
        },
        filters:{
            formatTime:function(val){
                function addzero(num){
                if( num < 10)
                    {
                        num="0"+num;
                    }
                    return num;
                }
                var str='';
                var month=val.getMonth()+1;
                var day=val.getDate();
                var hour=val.getHours();
                var minute=val.getMinutes();
                var second=val.getSeconds();
                return str=addzero(month)+'-'+addzero(day)+' '+ addzero(hour) + ':' +addzero(minute)+ ':' +addzero(second);
            }
        },
        methods:{           
            getskin:function(num){
                this.skin_f = this.skin[num]["key"];
                this.imgurl = this.skin[num]["imgurl"];
                this.title = this.skin[num]["key"]+"title";
                this.bgcolor = this.skin[num]["bgcolor"];
            },
            moreskin:function(){
                var _this=this;
                this.skinmore.forEach(function(value){
                    _this.skin.push(value);
                })

            }
        }
    })  
</script>
複製代碼

下載地址： Vue案例一css

先不錯，再不錯
不足之處，歡迎指出html

1. Vue簡易案例二(指令)
2. Vue2.0簡易案例
3. vue-cli+vue-router+vuex+iview書店案例（簡單易學）
4. 簡易 Ajax 入門案例
5. 簡易計算器案例
6. 簡易聊天室案例
7. vue + vuex 簡單案例
8. vue-router簡單案例
9. vue 簡單案例 todolist
10. Vue實例demo——簡易博客系統
更多相關文章...
• XSD 簡易元素 - XML Schema 教程
• 一對一關聯查詢 - MyBatis教程
• Git可視化極簡易教程 — Git GUI使用方法
• Github 簡明教程

相關標籤/搜索