javascript - vue新手求助。v-for和v-if在同级渲染出多个元素,如何单独更改其中一个元素的显示/隐藏
淡淡烟草味
淡淡烟草味 2017-06-12 09:27:36
[JavaScript讨论组]

在自制一个能增删改的todolist练手,模仿www.todolist.cn,做到重新编辑todo内容时卡住了,在官方没总结出解决方案,所以在这里求助。以下。

点击文字变成input修改,但效果是这样的
因为我v-if绑定的是同一个变量,所以肯定会全局改掉,但对vue的理解太浅,想不到有效的办法。
代码:`


NBtodoList





`
有什么办法能够在触发revamp事件后只让当前的span隐藏,input显示呢?求大牛指教!

淡淡烟草味
淡淡烟草味

全部回复(2)
扔个三星炸死你
this.isRevamp = !this.isRevamp;

这种方式会让所有的todo一起显示或隐藏,

要做到只针对某个todo 的话,你可以为每个todo添加一个isRevamp,然后变成:

todo.isRevamp = !todo.isRevamp;

但这就要求你的数据中一开始每个todo都包涵isRevamp,如果你想动态地添加,会比较麻烦一些,请看文档中有关“ 响应式原理”部分:https://cn.vuejs.org/v2/guide...

但有一个简单的处理方式:data中添加一个index变量,
大致是这样的:

<li v-for="(v,i) in list" v-show="i==index" @click="show(i)">{{v}}</li>

show:function(i){
this.index=i;
}
高洛峰

很简单啊,给每个元素绑定一个状态变量就行了。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号