我有一个 v-for 循环,当单击该循环中的项目时,我想隐藏 div#one 并显示 div#two。然后单击 div#two 中的按钮再次隐藏和显示 div#one。仅针对该列表项。
模板:
<div v-for="slider in slideritems">
<div v-if="!showEdit" @click="openEditor(slider)">
Normal list item, click to show edit options
</div>
<div v-if="showEdit">
<div @click="closeEditor(slider)">Close</div>
Edit options (if selected)
</div>
</div>
脚本:
export default {
methods: {
openEditor(slider) {
slider.showEdit = true
},
closeEditor(slider) {
slider.showEdit = false
}
}
}
最佳答案
由于您的方法正在翻转 slider 对象的 showEdit
成员,我认为您希望将 v-if
绑定(bind)到 slider.showEdit
,不仅仅是showEdit
:
<div v-for="slider in slideritems">
<div v-if="!slider.showEdit" @click="openEditor(slider)">
Normal list item, click to show edit options
</div>
<div v-if="slider.showEdit">
<div @click="closeEditor(slider)">Close</div>
Edit options (if selected)
</div>
</div>
这是一个有效的 jsFiddle:https://jsfiddle.net/psteele/wn1npgqu/
关于javascript - 在 v-for 列表项中显示和隐藏 div (Vue.js 2),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42176432/