首页 > 其他分享 >vue--day55--vue 的$nextTick以及MyItem编辑框

vue--day55--vue 的$nextTick以及MyItem编辑框

时间:2023-08-06 22:17:41浏览次数:42  
标签:nextTick vue -- li deleteTodo todo id todos

1. 语法 this.$nextTick(回调函数)

2. 作用 在下一次DOM 更新结束后执行其指定的回调

3. 什么时间用 当改变数据后,要基于更新后新的DOM进行某些操作时,要在nextTick 所指定的回调函数中执行。

1. App.vue

<template> <div id="root"> <div class="todo-container"> <div class="todo-wrap"> <!-- @addTodo 事件名 addTodo 回调名--> <MyHeader @addTodo="addTodo"/> <!--父亲给儿子传数据 父亲通过数据绑定传数据 儿子通过 props:['todos'],//声明接收todo 对象 --> <MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/> <MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/> </div> </div> </div>     </template>   <script> //样式的引入和这里有关系 import pubsub from 'pubsub-js' import MyHeader from './components/MyHeader.vue'; import MyList from './components/MyList.vue'; import MyFooter from './components/MyFooter.vue';     export default { name: 'App', components: { MyHeader, MyList, MyFooter }, data(){ return { todos:JSON.parse(localStorage.getItem("todos"))||[] }   },   methods:{ // 添加一个todo addTodo(todoObj){ // console.log('我是app组件,我收到了数据x==',todoObj); this.todos.unshift(todoObj)   }, //勾选or 取消勾选 todo checkTodo(id){ this.todos.forEach((todo)=>{ if(todo.id===id) todo.done=!todo.done }) }, //删除一个todo deleteTodo(_,id){ this.todos=this.todos.filter((todo)=>{ return todo.id!==id; }) },     //更新一个todo updateTodo(id,title){ this.todos.forEach((todo)=>{   if(todo.id===id) todo.title=title; })   },
//全选or全不选 checkAllTodo(done){ this.todos.forEach((todo)=>{ todo.done=done }) },   clearAllTodo(){ this.todos=this.todos.filter((todo)=>{ return !todo.done }) }   }, watch:{ // todos(value){ // localStorage.setItem("todos", JSON.stringify(value)); // } todos:{ deep:true, handler(value){ localStorage.setItem("todos", JSON.stringify(value)); } }   }, mounted(){ this.$bus.$on('checkTodo',this.checkTodo) //this.$bus.$on('deleteTodo',this.deleteTodo) this.pubId=pubsub.subscribe('deleteTodo',this.deleteTodo)   this.$bus.$on('updateTodo',this.updateTodo)
}, beforeDestroy(){ this.$bus.$off('checkTodo') //this.$bus.$off('deleteTodo') pubsub.unsubscribe(this.pubId) this.$bus.$off('updateTodo')   } } </script>   <style>     /* 整体样式 */ body { background: rgba(230, 241, 245, 0.816); }   .btn { display: inline-block; padding: 4px 12px; margin-bottom: 0; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 4px; }   .btn-danger { color: #fff; background-color: #da4f49; border: 1px solid #bd362f; margin-left:5px; }   .btn-edit { color: #fff; background-color: skyblue; border: 1px solid skyblue; } .btn-danger:hover { color: #fff; background-color: #bd362f; }   .btn:focus { outline: none; }   .todo-container { width: 600px; margin: 0 auto; }   .todo-container .todo-wrap { padding: 10px; border: 1px solid #ddd; border-radius: 5px; }   </style> 2. MyItem.vue <template> <li> <label> <input type="checkbox" :checked="todo.done" @click="handlerCheck(todo.id)"/>
  <span v-show="!todo.isEdit">{{todo.title}}</span>
<input v-show="todo.isEdit" type="text" :value="todo.title" @blur="handlerBlur(todo,$event)" ref="inputTitle"/>
</label> <button class="btn btn-danger" @click="hadnlerDelete(todo.id)">删除</button> <button v-show="!todo.isEdit" class="btn btn-edit" @click="handlerEdit(todo)">编辑</button> </li> </template>
<script> import pubsub from 'pubsub-js' export default { name:"MyItem", props:['todo'],//声明接收todo 对象 mounted(){ //console.log(this.todo); }, methods:{ //勾选或者取消勾选 handlerCheck(id){ //通知app 组件 将对应的todo 对象的done 值取反 //console.log("id",id); //this.checkTodo(id);
this.$bus.$emit('checkTodo',id) }, //闪促 hadnlerDelete(id){ if(confirm('确定删除么')){ //console.log("id",id);
//通知app 删除一个对象 //this.deleteTodo(id); // this.$bus.$emit('deleteTodo',id)
pubsub.publish('deleteTodo',id)
} }, handlerEdit(todo){   if(todo.hasOwnProperty('isEdit')){ todo.isEdit=true; }else{ this.$set(todo,'isEdit',true) }
this.$nextTick(function(){ this.$refs.inputTitle.focus() })     }, //失去焦点回调 真正执行修改逻辑 handlerBlur(todo,e){ todo.isEdit=false; if(!e.target.value.trim()) return alert('不能为空') this.$bus.$emit('updateTodo',todo.id,e.target.value) }
} } </script>
<style scoped>
/*item*/ li { list-style: none; height: 36px; line-height: 36px; padding: 0 5px; border-bottom: 1px solid #ddd; }
li label { float: left; cursor: pointer; }
li:hover { background-color: grey; cursor: pointer; }
li label li input { vertical-align: middle; margin-right: 6px; position: relative; top: -1px; }
li button { float: right; display: none; margin-top: 3px; }
li:hover button { display: block; }
li:before { content: initial; }
li:last-child { border-bottom: none; }
</style>

标签:nextTick,vue,--,li,deleteTodo,todo,id,todos
From: https://www.cnblogs.com/satisfysmy/p/17610154.html

相关文章

  • Intel 4工艺太难了!酷睿Ultra终于突破5GHz
    无论是14nm还是10nm,Intel这些年的新工艺都有一个通性:刚诞生的时候性能平平,高频率都上不去,只能用于笔记本移动端(分别对应5代酷睿、10代酷睿),后期才不断成熟,比如到了13代酷睿就达到史无前例的6GHz。接下来的Intel4,也就是最初的7nm,也要重复这条路了。代号MeteorLake的酷睿Ultra......
  • C++核心编程——引用
    引用1引用的基本使用作用:给变量起别名语法:数据类型&别名=原名示例:intmain(){ inta=10; int&b=a; cout<<"a="<<a<<endl; cout<<"b="<<b<<endl; b=100; cout<<"a="&......
  • 【模板】线段树
    引入题目描述给定\(n\)个数\(a[1],a[2],a[3]...a[n]\),现在又下面两种操作:1.询问区间\([x,y]\)的和,并输出。2.将下标为\(x\)的数增加\(val\)。一共\(x\)此操作\(1\len,m\le100000\),保证在\(int\)范围内。方法一:暴力枚举定义数组\(a\)储存\(n\)个元素。求区间和的时间复......
  • django之manage.py migrate无效的问题
    问题已有的model,迁移之后,想重新设置字段,于是将migrations文件夹中除__init__.py之外其他文件都删掉,并且把数据库中的表删除,再次执行以下步骤pythonmanage.pymakemigrations确认成功,执行pythonmanage.pymigrate,提示Nomigrationstoapply.无法对表模型进行更改。解决方案p......
  • Windows11使用docker desktop安装kafka&zookeeper集群
    docker-compose安装zookeeper集群参考文章:http://t.csdn.cn/TtTYIhttps://blog.csdn.net/u010416101/article/details/122803105?spm=1001.2014.3001.5501准备工作:​ 在开始新建集群之前,新建好文件夹,用来挂载kafka、zookeeper数据,如下:zookeeper文件夹D:\soft\docker\zookee......
  • 扩展欧几里得算法与乘法逆元
    Part1:前置知识欧几里得算法\[\foralla,b\in\mathbb{N},\gcd(a,b)=\gcd(b,a\bmodb)\]\(\mathrm{Bézout}\)定理对于任意整数\(a,b\),存在一对整数\(x,y\),满足\(ax+by=\gcd(a,b)\)证明:在欧几里得算法的最后一步,即\(b=0\)时,显然有一对整数\(x=1,y=0\),使得\(a......
  • 容斥原理
    Part1:知识点Part2:例题【模板题】区间整除数题意给出一个数组\(a[1..n]\),问在区间\([L,R]\)中有多少个数,至少能被a中的一个数整除。解题思路总体来说,我们可先求出区间\([1,L-1]\)中能被a数组整除的数,再求出\([1,R]\)中能被a数组整除的数,两者相减即是答案那么对于......
  • SOS DP(子集 DP)
    Part1:前置知识1、状压DP2、基本的位运算操作Part2:SOSDP(以下的内容大部分翻译至CF上的原文)1、例题引入给定一个含\(2^N\)个整数的集合\(A\),我们需要计算:\(\forallx\subseteqA\),\(x\)中所有元素\(i\)的\(A[i]\)的和,即求:\[F[mask]=\sum\limits_{i\subseteq......
  • Codeforces Round 890 (Div. 2) supported by Constructor Institute
    Preface现在开始严格按照双号上分法来打CF了,大致就是每次比赛都拿两个号中分较少的那个打,这样可以保证两个号的最高分不降然后昨天打完就后悔了,没有拿hl666那个号打导致没抓住难得的上分机会,本来可以打到橙名渡劫局的但分全加在Kusanagi_Misuzu那个号上了不过昨天这场其实可以......
  • 欧拉函数与积性函数
    \(Update\:\:on\:\:2023.8.3\):增加了积性函数的内容,修改了内容排版Part1:欧拉函数及其性质定义:欧拉函数\(φ(n)\)表示小于等于\(n\),且与\(n\)互质的正整数的个数。公式:若在算数基本定理中,\(n=p_1^{c_1}p_2^{c_2}...p_m^{c_m}\)(\(p\)为质数),则由容斥原理:\[φ(n)=n*\d......