zoukankan      html  css  js  c++  java
  • vue 结合localStorage 来双向绑定数据

    结合localStorage 来双向绑定数据(超级神奇)

    localStorage.js: 

    const STORAGE_KEY = 'todos_vuejs'
    export default {
      fetch () {
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
      },
      save (items) {
        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
      }
    }

    App.vue

    打开Chrome浏览器控制台找到"Application - Storage - Local Storage",观察变化

    <template>
      <div id="app">
         <h1>{{title}}</h1> <!-- <h1 v-text='title'></h1> -->
         <input type="text" v-model='newItem' @keyup.enter='addItem'>
         <ul>
           <li v-for='item in items' v-bind:class="{finished: item.isFinished}" v-on:click='toggleFinish(item)'>
             {{item.label}}
           </li>
         </ul>
      </div>
    </template>
    
    <script>
    import Storage from './localStorage.js'
    console.log(Storage)
    export default {
      data () {
        return {
          title: 'Hello World!',
          items: Storage.fetch(),
          newItem: ''
        }
      },
      methods: {
        toggleFinish (item) {
          item.isFinished = !item.isFinished
        },
        addItem () {
          console.log(this.newItem)
          this.items.push({
            label: this.newItem,
            isFinished: false
          })
          this.newItem = ''
        }
      },
      watch: {
        items: {
          handler (items) {
            Storage.save(items)
          },
          deep: true
        }
      }
    }
    </script>
    
    <style>
    .finished{text-decoration: underline;}
    html {height: 100%; }
    body {display: flex; align-items: center; justify-content: center; height: 100%; }
    #app {color: #2c3e50; margin-top: -100px; max-width: 600px; font-family: Source Sans Pro, Helvetica, sans-serif; text-align: center; }
    #app a {color: #42b983; text-decoration: none; }
    .logo {width: 100px; height: 100px }
    </style>

  • 相关阅读:
    求链表的倒数第k个节点
    打印蛇形矩阵
    数组元素前移问题(今日头条笔试题)
    单链表的节点内数据值的删除问题(携程网笔试题)
    子树判断问题(百度笔试题)
    求链表的第一个公共节点问题(好未来笔试题)
    正则表达式常用总结
    正则表达式start(),end(),group()方法
    test、exec、match区别
    matches()方法
  • 原文地址:https://www.cnblogs.com/CyLee/p/8425122.html
Copyright © 2011-2022 走看看