a.html b.html
a.html 如何传递参数给b.html
1.先将a.html的参数存储在storage中
2.切换到b.html时取storage数据
考虑步骤
1.使用bootstrap框架。
2.引入了vuejs文件。
3.如何防止刷新页面后数据不消失。解决存储在前端。前端存储的好处,减少了http请求,减轻服务端的压力。
页面样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./bootstrap-3.3.7/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="./css/demo.css"> <script src="../vuejs/vue.js"></script> <script src="./js/demo.js"></script> </head> <body> <div class="container" id="my"> <div class="form-horizontal"> <div class="form-group"> <label class="col-sm-1 control-label">昵称:</label> <div class="col-sm-11"> <input type="text" class="form-control name" placeholder="请输入昵称" v-model="nickname"> </div> </div> <div class="form-group"> <label class="col-sm-1 control-label">标题:</label> <div class="col-sm-11"> <input type="text" class="form-control name" placeholder="请输入标题" v-model="title"> </div> </div> <div class="form-group"> <label class="col-sm-1 control-label">内容:</label> <div class="col-sm-11"> <textarea class="form-control message" rows="5" placeholder="请输入内容" v-model='content'> </textarea> </div> </div> <div class="form-group btn-box"> <div class="col-sm-offset-1 col-sm-11"> <button type="submit" class="btn btn-success submit" @click="submit()">发布</button> <button class="btn btn-danger deleteAll" @click="delAll()">删除所有</button> </div> </div> </div> <div class="panel panel-primary"> <div class="panel-heading"> 文章列表 </div> <div class="panel-body"> <table class="table"> <thead> <tr> <th>标题</th> <th>内容</th> <th>发布者</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="o in listData"> <td> {{o.title}} </td> <td> {{o.content}} </td> <td> {{o.nickname}} </td> <td> <button @click="del(o.nickname)">删除</button> </td> </tr> </tbody> </table> </div> </div> </div> </body> </html>
demo.js文件
//事件
window.onload = function () { //面向对象:抽象 多态 继承 封装 //对象:成员 方法 new Vue({ el: "#my", data: { nickname: '', title: '', content: '', listData: [{ nickname: "aaa", title: "test", content: "content" }] }, methods: { list: function () { var obj = localStorage.getItem('article'); if (obj) { this.listData = JSON.parse(obj); } }, submit: function () { var obj = {} obj.nickname = this.nickname; obj.title = this.title; obj.content = this.content; this.listData.push(obj); localStorage.setItem('article', JSON.stringify(this.listData)); }, // 删除一条数据 del(nickname) { // for(var i=0;i<=this.listData.length;i++){ // if(this.listData[i].nickname===nickname){ // this.listData.splice(i,1); // break; // } // } this.listData = this.listData.filter(o=>o.nickname != nickname); //持久化 localStorage.setItem('article', JSON.stringify(this.listData)); }, delAll() { this.listData = []; localStorage.removeItem('article'); } }, mounted() { //vue实例声明周期 this.list(); }, }) }