亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue.js實現備忘錄功能的方法

發布時間:2020-09-02 19:48:55 來源:腳本之家 閱讀:524 作者:jingxian 欄目:web開發

這個vue實現備忘錄的功能demo是K在github上找到的,K覺得這是一個用來對vue.js入門的一個非常簡單的demo,所以拿在這里共享一下。

(尊重他人勞動成果,從小事做起~  demo原github地址:https://github.com/vuejs/vue)

一、實現效果

 vue.js實現備忘錄功能的方法

二、代碼展示

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>備忘錄</title>
    <link rel="stylesheet" type="text/css" href="css/index.css" rel="external nofollow" />
    <style>[v-cloak] { display: none; }</style>
  </head>

  <body>
  <section class="todoapp">
   <header class="header">
    <h2>todos</h2>
    <input class="new-todo"
     autofocus autocomplete="off"
     placeholder="What needs to be done?"
     v-model="newTodo"
     @keyup.enter="addTodo">
   </header>
   <section class="main" v-show="todos.length" v-cloak>
    <input class="toggle-all" type="checkbox" v-model="allDone">
    <ul class="todo-list">
     <li v-for="todo in filteredTodos"
      class="todo"
      :key="todo.id"
      :class="{ completed: todo.completed, editing: todo == editedTodo }">
      <div class="view">
       <input class="toggle" type="checkbox" v-model="todo.completed">
       <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
       <button class="destroy" @click="removeTodo(todo)"></button>
      </div>
      <input class="edit" type="text"
       v-model="todo.title"
       v-todo-focus="todo == editedTodo"
       @blur="doneEdit(todo)"
       @keyup.enter="doneEdit(todo)"
       @keyup.esc="cancelEdit(todo)">
     </li>
    </ul>
   </section>
   <footer class="footer" v-show="todos.length" v-cloak>
    <span class="todo-count">
     <strong>{{ todos.length }}</strong> {{ remaining | pluralize }} left
    </span>
    <ul class="filters">
     <li><a href="#/all" rel="external nofollow" :class="{ selected: visibility == 'all' }">All</a></li>
     <li><a href="#/active" rel="external nofollow" :class="{ selected: visibility == 'active' }">Active</a></li>
     <li><a href="#/completed" rel="external nofollow" :class="{ selected: visibility == 'completed' }">Completed</a></li>
    </ul>
    <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
     Clear completed
    </button>
   </footer>
  </section>
    <footer class="info">
      <p>雙擊編輯一條備忘錄</p>
    </footer>

  </body>

  <script language="JavaScript" src="js/director.js"></script>
  <script language="JavaScript" src="js/vue.js"></script>
  <script language="JavaScript" src="js/index_vue.js"></script>

</html>
// 本地緩存設置
// 防止頁面關閉后,數據全部丟失的問題
var STORAGE_KEY = 'todos-vuejs-2.0'
var todoStorage = {
  
  // 獲取本地存儲中的內容
  fetch:function(){
    // JSON.parse()解析一個json字符串
    //  localStorage.getItem 從本地存儲中獲取STORAGE_KEY字段的值
    var todos = JSON.parse(localStorage.getItem(STORAGE_KEY)||'[]');
    //  foreach遍歷todos,兩個參數分別為遍歷出的每一個子單元及對應的索引
    todos.forEach(function(todo,index){
      todo.id = index;
    })
    todoStorage.uid = todos.length;
    return todos;
  },
  
  // 保存時將內容寫進本地存儲
  save:function(todos){
    // localStorage.setItem 將todos轉化成字符串存入本地存儲,鍵名為STORAGE_KEY
    localStorage.setItem(STORAGE_KEY,JSON.stringify(todos))
  }
  
}

// 可視化狀態過濾設置
//  包括全選(all)、選擇未完成(active)、選擇已完成(completed)
var filters = {
  all:function(todos){
    return todos;
  },
  
  //  filter() 方法創建一個新的數組,新數組中的元素是通過檢查指定數組中符合條件的所有元素。
  active:function(todos){
    return todos.filter(function(todo){
      return !todo.completed;
    })
  },
  
  completed:function(todos){
    return todos.filter(function(todo){
      return todo.completed;
    })
  }
}


// vue實例化
var app = new Vue({
  
  //  data 參數設置
  data:{
    todos:todoStorage.fetch(),
    newTodo:'',
    editedTodo:null,
    visibility:'all'
  },
  
  //  watch 監視todos在本地儲存中的變化
  watch:{
    todos:{
      handler:function(todos){
        todoStorage.save(todos)
      },
      deep:true
    }
  },
  
  //  computed 檢測數據發生變動時執行函數
  computed:{
    
    filteredTodos:function(){
      return filters[this.visibility](this.todos)
    },
    
    remaining:function(){
      return filters.active(this.todos).length
    },
    
    allDone:{
      get:function(){
        return this.remaining === 0
      },
      
      set:function(value){
        this.todos.forEach(function(todo){
          todo.completed = value
        })
      }
      
    }
  },
  
  //  methods 方法設置
  methods:{
    addTodo:function(){
      var value = this.newTodo && this.newTodo.trim()
      if(!value){
        return;
      }
      this.todos.push({
        id:todoStorage.uid++,
        title:value,
        completed:false
      })
      this.newTodo = ''
    },
    
    removeTodo:function(todo){
      this.todos.splice(this.todos.indexOf(todo),1)
    },
    
    editTodo:function(todo){
      this.beforeEditCache = todo.title;
      this.editedTodo = todo
    },
    
    doneEdit:function(todo){
      if(!this.editedTodo){
        return;
      };
      this.editedTodo = null;
      todo.title = todo.title.trim()
      if(!todo.title){
        this.removeTodo(todo)
      }
    },
    
    cancelEdit:function(todo){
      this.editedTodo = null;
      todo.title = this.beforeEditCache
    },
    
    removeCompleted:function(){
      this.todos = filters.active(this.todos)
    }
  },
  
  directives:{
    'todo-focus':function(el,binding){
      if(binding.value){
        el.focus()
      }
    }
  }
})


// hashchange URL的片段標識符更改觸發
function onHashChange(){
  var visbility = window.location.hash.replace(/#\/?/, '');
  if(filters[visbility]){
    app.visibility = visbility
  }else{
    window.location.hash = '';
    app.visbility = 'all'
  }
}

window.addEventListener('hashchange',onHashChange)
onHashChange()

// mount 手動掛載
app.$mount('.todoapp')

以上這篇vue.js實現備忘錄功能的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

外汇| 宁安市| 青田县| 化德县| 汾西县| 丰县| 宁国市| 阜平县| 扶风县| 天峨县| 钟山县| 玉屏| 汤阴县| 阿城市| 奎屯市| 荣成市| 星座| 偃师市| 瑞丽市| 藁城市| 赣州市| 弥勒县| 泌阳县| 旺苍县| 山东| 大同市| 滨州市| 安义县| 克山县| 上蔡县| 青州市| 上虞市| 瑞昌市| 新闻| 六盘水市| 南丰县| 洪湖市| 阜新市| 洪泽县| 南江县| 杭锦旗|