ホームページ >ウェブフロントエンド >jsチュートリアル >vue.jsでのメモ機能の実装について詳しく解説
vue.jsでのメモ機能の実装について詳しく解説
- 巴扎黑オリジナル
- 2017-07-23 15:26:262106ブラウズ
この vue のメモ機能の実装のデモは、K さんが github で見つけたもので、vue.js を始めるための非常に簡単なデモだと思ったので、ここで共有しました。
(他の人の仕事の結果を尊重し、小さなことから始めましょう~ デモの元の github アドレス:)
1. 実装効果
2. コードディスプレイ
rreee<!DOCTYPE html><html><head><meta charset="UTF-8"><title>备忘录</title><link rel="stylesheet" type="text/css" href="css/index.css?1.1.11" /><style>[v-cloak] { display: none; }</style></head><body><section class="todoapp"> <header class="header"><h1>todos</h1><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" :class="{ selected: visibility == 'all' }">All</a></li> <li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li> <li><a href="#/completed" :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?1.1.11"></script><script language="JavaScript" src="js/vue.js?1.1.11"></script><script language="JavaScript" src="js/index_vue.js?1.1.11"></script></html>
以上がvue.jsでのメモ機能の実装について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jsPlumb フローチャートの体験概要次の記事：jsPlumb フローチャートの体験概要