1. 程式人生 > >對html頁無法使用模板頁問題的解決

對html頁無法使用模板頁問題的解決

對於HTML+ajax開發前端,很多時候頁面會有一部分固定內容,例如底部一個切換,相當於tab,很多頁面都會用到,一個一個頁面寫肯定是不明智的。

曾經使用過ifream來實現,呵呵。。。

用一個js檔案,每個頁面拉一個,這樣也可以,每次修改只要修改js檔案,所有頁面都修改了。

迴歸正題:

直接上程式碼:js檔案程式碼,url就是跳轉地址,ison是是否選中,count是tab上有時候需要提示一個數字還是什麼,自行理解。

Vue.component('webbottom', {
    props: ['post'],
    template: " <a  v-on:click=\"$emit('goto-url',post.url,post.id)\" :class=\"[post.ison]\" >{{post.title}}<span v-if=\"post.count>0\">{{post.count}}</span></a>"
})
var Index = new Vue({
    el: '#app_bottom',
    data: {
        posts: [
      { id: 7, title: '我的首頁', url: 'HtmlPage.html',ison:'' },
      { id: 8, title: '個人中心', url: 'vue_compnent.html', ison:'' },
      { id: 9, title: '訊息中心', url: 'content', count: 1, ison:'' }
        ]
    },
    methods: {
        GotoUrl: function (argument,id) {
            alert(argument);
            //許可權
            location.href = argument;
        }
    }
});
//初始化資料
$(document).ready(function () {
    Index.posts[2].count = 5;
    Index.posts[id].ison = "on";
})

前端頁面:html,在每個需要的頁面都填上這段程式碼,樣式有樣式表就不用添加了,我自己寫的樣式用來測試選中狀態,醜死了。注意裡面有個變數id,這個就是一個值,告訴js那個標籤處於選中狀態。和js中這個id是對應的

記得要引用js
 <script src="jquery132min.js"></script>
 <script src="vue.js" type="text/javascript"></script>

寫一個可複用檔案(可當做HTML頁的模板內容)放在body裡
    <style type="text/css">
        .bottom span {
            padding: 10px;
            margin: 10px;
            background-color: red;
        }

        .bottom a {
            padding: 10px;
            margin: 10px;
            background-color: yellow;
            cursor: alias;
        }

            .bottom a:hover {
                padding: 10px;
                margin: 10px;
                background-color: blue;
            }

            .bottom a.on {
                background-color: forestgreen;
            }
    </style>
    <div id="app_bottom" class="bottom">
        <a class="on">測試<span>效果</span></a>

        <webbottom v-for="post in posts"
                   v-bind:key="post.id" v-bind:post="post" v-on:goto-url="GotoUrl"></webbottom>
    </div>
    <script> var id =0;//獲得引數 </script>
    <script src="JavaScript.js" type="text/javascript"></script>

程式碼簡簡單單,喜歡就點個贊。