localstorage和vue结合使用
父组件html
1 <template> 2 <div class="hello"> 3 <p>Original message:"{{message}}"</p><br/> 4 <input v-model="newTodoText" v-on:keyup.enter="addNewText" placeholder="Add a todo"> 5 <ul> 6 <li is="tab2" v-for="(todo,index) in todos" :key="todo.id" :title="todo.title" @remove="todos.splice(index,1)"> 7 </li> 8 </ul> 9 </div> 10 </template> 11 12 <script> 13 import store from '@/store/todo_list.js' 14 import Tab2 from '@/components/tab2/tab2' 15 export default { 16 components:{Tab2}, 17 data () { 18 return { 19 message:"Hello", 20 newTodoText:'', 21 todos: store.fetch(), 22 nextTodoId: 4 23 } 24 }, 25 watch:{ 26 todos:function(val){ 27 console.log(val); 28 store.save(val); 29 } 30 }, 31 computed:{ 32 33 }, 34 methods: { 35 addNewText: function () { 36 this.todos.push({ 37 id: this.nextTodoId++, 38 title: this.newTodoText 39 }) 40 this.newTodoText = '' 41 } 42 } 43 } 44 </script> 45 46 <!-- Add "scoped" attribute to limit CSS to this component only --> 47 <style scoped> 48 h1, h2 { 49 font-weight: normal; 50 } 51 52 ul { 53 list-style-type: none; 54 padding: 0; 55 } 56 57 li { 58 display: inline-block; 59 margin: 0 10px; 60 } 61 62 a { 63 color: #42b983; 64 } 65 .active{ 66 color:red; 67 } 68 .text-danger{ 69 color:green; 70 } 71 </style>
todo_list.jsvue
1 const STORAGE_KEY = 'todos-vuejs' 2 3 export default { 4 5 fetch: function() { 6 7 return window.JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') 8 9 }, 10 11 save: function(items) { 12 13 window.localStorage.setItem(STORAGE_KEY, window.JSON.stringify(items)) 14 15 } 16 17 }
子组件返回删除按钮jquery
1 <template> 2 <li>{{title}} 3 <button v-on:click="close">X</button> 4 </li> 5 </template> 6 <script> 7 export default{ 8 props:['title'], 9 data(){ 10 return{ 11 12 } 13 }, 14 methods:{ 15 close(){ 16 this.$emit('remove'); 17 } 18 } 19 } 20 </script> 21 <style> 22 </style>
效果bootstrap
接一篇本身写的工具
引入jquery和bootstrap查考我vue分类里面的随便，fetch
我这里在页面里面构建了本身的storage全局工具类this
1 <template> 2 <div class="container"> 3 <form role="form"> 4 <div class="form-group"> 5 <label for="username">用户名:</label> 6 <input type="text" id="username" class="form-control" placeholder="输入用户名"
v-model.trim="username"> 7 </div> 8 <div class="form-group"> 9 <label for="age">年 龄:</label> 10 <input type="text" id="age" class="form-control" placeholder="输入年龄" v-model.trim="age"> 11 </div> 12 <div class="form-group"> 13 <input type="button" value="添加" class="btn btn-primary" @click="add()"> 14 <input type="button" value="重置" class="btn btn-danger"> 15 </div> 16 </form> 17 <hr> 18 <table class="table table-bordered table-hover"> 19 <caption class="h2 text-info">用户信息表</caption> 20 <tr class="text-danger"> 21 <th class="text-center">序号</th> 22 <th class="text-center">名字</th> 23 <th class="text-center">年龄</th> 24 <th class="text-center">操做</th> 25 </tr> 26 <tr class="text-center" v-for="(item,index) in myData"> 27 <td>{{index}}</td> 28 <td>{{item.name}}</td> 29 <td>{{item.age}}</td> 30 <td> 31 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer"
@click="nowIndex==index">删除</button> 32 </td> 33 </tr> 34 35 <tr v-show="myData.length!=0"> 36 <td colspan="4" class="text-right"> 37 <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer"
v-on:click="nowIndex=-2">删除所有</button> 38 </td> 39 </tr> 40 <tr v-show="myData.length==0"> 41 <td colspan="4" class="text-center text-muted"> 42 <p>暂无数据....</p> 43 </td> 44 </tr> 45 </table> 46 47 <!--模态框 弹出框--> 48 <div role="dialog" class="modal fade bs-example-modal-sm" id="layer"> 49 <div class="modal-dialog"> 50 <div class="modal-content"> 51 <div class="modal-header"> 52 <button type="button" class="close" data-dismiss="modal"> 53 <span>×</span> 54 </button> 55 <h4 class="modal-title">确认删除么?</h4> 56 </div> 57 <div class="modal-body text-right"> 58 <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button> 59 <button data-dismiss="modal" class="btn btn-danger btn-sm"
@click="deleteMsg(nowIndex)">确认</button> 60 </div> 61 </div> 62 </div> 63 </div> 64 </div> 65 </template> 66 67 <script> 68 export default { 69 name: 'HelloWorld', 70 data () { 71 return { 72 myData:[], 73 username:'', 74 age:'', 75 nowIndex:-100 76 } 77 }, 78 created(){ 79 if(this.$storage.getStorage("myData-list")){ 80 var index=this.$storage.getStorage("myData-list"); 81 this.myData=index; 82 } 83 }, 84 watch:{ 85 myData:function(nowVal,oldVal){ 86 this.$storage.setStorage("myData-list",nowVal); 87 } 88 }, 89 methods:{ 90 add(){ 91 if(this.username.length==0 || this.age.length==0){ 92 alert("用户名或年龄不为空"); 93 }else{ 94 this.myData.push({ 95 name:this.username, 96 age:this.age 97 }); 98 this.username=""; 99 this.age="" 100 } 101 }, 102 deleteMsg(n){ 103 if(n==-2){ 104 this.myData=[]; 105 }else{ 106 this.myData.splice(n,1); 107 } 108 } 109 } 110 } 111 </script>
参考连接：http://www.cnblogs.com/yingzi1028/p/7774954.htmlspa