对html页无法使用模板页问题的解决

对于HTML+ajax开发前端，很多时候页面会有一部分固定内容，例如底部一个切换，相当于tab，很多页面都会用到，一个一个页面写肯定是不明智的。

曾经使用过ifream来实现，呵呵。。。

用一个js文件，每个页面拉一个，这样也可以，每次修改只要修改js文件，所有页面都修改了。

回归正题：

不久前发现一个js，就是vue.js。嗯，基本的东西都挺好用的，但对于我这个非专业搞前端的，深入的学习也没必要，给大伙一个地址https://cn.vuejs.org/v2/guide/，把基础的掌握了，前端绑定显示数据就没什么问题了，做个手机网站so easy。

 

 

直接上代码：js文件代码，url就是跳转地址，ison是是否选中，count是tab上有时候需要提示一个数字还是什么，自行理解。

Vue.component('webbottom', {
    props: ['post'],
    template: " {{post.title}}0\">{{post.count}}"
})
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
 
 

写一个可复用文件（可当做HTML页的模板内容）放在body里
    
    

        测试效果

        
    
    
    

 

代码简简单单，喜欢就点个赞。