In diesem Artikel wird hauptsächlich der Beispielcode der offiziellen Website von Vue vorgestellt Grundsätzlich habe ich mir nicht den Quellcode der offiziellen Website angesehen, sondern nur die benutzerdefinierten Anweisungen. Lassen Sie es uns Schritt für Schritt erkunden. Offizielle Website-Demo
Zu implementierende Funktion
Einzelne Aufgaben hinzufügen
Einzelne Aufgaben hinzufügen
<input type="text" class="todos_add" placeholder="What needs to be done?"
@keyup.enter="addTodo($event.target)" //绑定enter事件
ref="currentInput">//操作input元素使enter一下之后清空输入框内容
Nach dem Login kopieren
Einzelnes Löschen einer Aufgabe
data() {//一些初始化数据
return {
todolists: [],
dataStatus: ["All", "Active", "Completed"],
dataStatusIndex: 0,
whichShow: true,
defaultShow: true
}
},
addTodo(e) { //添加todo
var val = e.value
if (val === "") {return} //如果输入内容为空则立即返回
this.todoLists = this.todoLists.concat({//使用concat这个api添加todo
value: val, //输入内容
isEditing: false, //是否在编辑状态
isActive: false, //删除X图标是否激活
isChecked: false //是否已完成
})
this.$refs.currentInput.value = "" //按下enter添加todo之后把输入框value清零
window.localStorage.setItem("content",JSON.stringify(this.todoLists))//使用localStorage以JSON格式存储数据
},Nach dem Login kopieren
<li class="content_todoList"
v-for="(list,index) in todoLists"
@mouseover="list.isActive = true" //鼠标移入todo改变对应todo的isActive状态
@mouseleave="list.isActive=false" //鼠标移出todo改变对应todo的isActive状态
<span class="el-icon-close content_todoList_delete"
:class="{show: list.isActive}" //动态绑定class使鼠标移动到某一todo显示X图标
@click="deleteTodo(index)"> //绑定删除单条todo事件
</span>
</li>Nach dem Login kopieren
Doppelklicken, um die Aufgabe zu bearbeiten&&eine einzelne Aufgabe ist abgeschlossen
deleteTodo(index) { //删除单条todo
this.todoLists.splice(index, 1)//使用splice的api
window.localStorage.setItem("content",JSON.stringify(todoLists)) //以JSON格式存储数据//localStorage存储数据
},Nach dem Login kopieren
Verwenden Sie todos idChecked, um zu steuern, ob es abgeschlossen ist, und ändern Sie so den Stil dynamisch.
Alle Aufgaben wurden erledigt
<input type="checkbox" class="checkBox"
v-model="list.isChecked">//双向绑定isChecked
<p class="content_todoList_main"
@dblclick="toEdit(list)" //双击事件
v-show="!list.isEditing" //切换元素
:class="{deleted:list.isChecked}"> //动态绑定class该表已完成todo样式
{{list.value}}
</p>
<input type="text" class="content_todoList_main main_input"
v-model="list.value" //双向绑定可输入value
v-show="list.isEditing" //切换元素
v-todo-focus="list.value" //自定义指令，双击之后自动focus对焦
@blur="unEdit(list)"> //绑定blur失去焦点事件Nach dem Login kopieren
methods: {
toEdit(obj) { //使添加的todothing可编辑
obj.isEditing = true
},
unEdit(obj) { //使添加的todothing不可编辑
obj.isEditing = false
},
}
directives: { //自定义focus指令,需要一个binding参数做判断
"todo-focus": function (el, binding) {
if (binding.value) {
el.focus()
}
}
}Nach dem Login kopieren
Die Anzahl der zu erledigenden Aufgaben wird angezeigt
<span
class="icon-down el-icon-arrow-down" //使用element库做向下箭头icon
v-show="todoLists.length>0" //通过todoLists控制是否显示向下箭头icon
@click="selectAllTodos"></span> //全部已完成事件
Nach dem Login kopieren
selectAllTodos() { //设置所有todo为已完成,使用map的api通过todo的isChecked属性操作
this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)
}Nach dem Login kopieren
Alle abgeschlossenen Aufgaben löschen
<p class="data_times" v-show="times === 0"> //times为0显示item，大于0显示items，细节注定成败
<span>{{times}}</span>  item left
</p>
<p class="data_times" v-show="times > 0">
<span>{{times}}</span>  items left</p>Nach dem Login kopieren
Drei-Status-Filterung
Alle Todos, abgeschlossenen Todos, unvollendeten Todos-Filterung
computed: {
times() { //使用计算属性计算待办todos的次数
let todoArr = this.todoLists
let times = 0
for (let i = 0; i < todoArr.length; i++) {
if (todoArr[i].isChecked === false) {
times++
}
}
return times
}
},Nach dem Login kopieren
<p class="data_clearTodos"
@click="clearTodos"
v-show="times < todoLists.length"> //如果待办事件次数小于总todoLists长度就显示“clear completed”
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >clear completed</a>
</p>
<p class="data_clearTodos"
@click="clearTodos"
v-show="times === todoLists.length"> //如果待办事件次数等于总todoLists长度就显示“clear completed”
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
</p>
Nach dem Login kopieren
Was ich hier mache, ist eine simultane, wenn bedingte Satzbeurteilungsoperation, Es ist etwas mühsam und mir sind noch keine anderen Lösungen eingefallen. Verwenden Sie den ternären Operator und den Operator or für das li-Element, um Aufgaben in verschiedenen Zuständen anzuzeigen.
Vollständiger Code
clearTodos() { //清空已完成的todoLists，使用filter的api进行筛选
this.todoLists = this.todoLists.filter(todo => todo.isChecked === false)
window.localStorage.setItem("content",JSON.stringify(this.todoLists)) //以json格式存储数据
},Nach dem Login kopieren
Verwandte Artikel:
So implementieren Sie die mehrseitige Entwicklung in vue2.0
So implementieren Sie die Drag-Verifizierung mit jQuery und vue Codefunktion
Detaillierte Einführung in mehrere JavaScript-Codierungsspezifikationen (ausführliches Tutorial)
Das obige ist der detaillierte Inhalt vonDetaillierte Interpretation des todoMVC-Codes in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
