联系客服
15985840591

vue详细页开发模板

分享 未结 置顶 精帖 1 6
白茶大师
白茶大师 VIP3 2018年03月17日

vue详细页开发模板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="https://cdn.bootcss.com/mui/3.7.1/css/mui.min.css" rel="stylesheet"  />
       <link href="css/app.css" rel="stylesheet"  />
    </head>
    <body>
          
          
         
        <div id="app-show">
            <header class="mui-bar mui-bar-nav">
                <a v-on:click="goBack" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
                <h1 class="mui-title">{{pageTitle}}</h1>
            </header>
            <div class="mui-content">
                <div class="d-pd">
                    <div class="d-title">{{data.title}}</div>
                    <div class="d-img" v:if="data.imgurl!=''">
                        <img :src="data.imgurl">
                    </div>
                    <div class="d-content" v-html="data.content"></div>
                </div>
                 
            </div>
             
        </div>
        <script src="js/app.js"></script>
        <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script>
          
            var appShow=new Vue({
                el:"#app-show",
                data:{
                    message:"",
                    data:[],
                    pageTitle:"详细页"
                },
                methods:{
                    getPage:function(){
                        var id=getPara('id');
                        var type=getPara('type');
                        switch(type){
                            case "article":
                                    appShow.getArticle(id);
                                break;
                            case "product":
                                    appShow.getProduct(id);
                                break;
                        }
                          
                    },
                    getArticle:function(id){
                        $.get(SITE+"/shop.php?CORS=1&ajax=1&m=article&a=show",{
                            id:id
                        },function(res){
                            appShow.data=res.data.data;
                            appShow.message=res.message
                        },"json")
                    },
                    getProduct:function(id){
                        $.get(SITE+"/shop.php?CORS=1&ajax=1&m=product&a=show",{
                            id:id
                        },function(res){
                            appShow.data=res.data.data;
                            appShow.message=res.message
                        },"json")
                    },
                    goBack:function(){
                        window.history.back();
                    }
                      
                }
            })
            appShow.getPage();
             
        </script>
    </body>
</html>



回帖
 

回贴周榜

本周热议
没有相关数据
layui

微信扫码关注 得推网 公众号