v-for与v-if(v-show)的配合使用

转载：https://www.jianshu.com/p/3e63f23e9886 感谢作者的分享！

使用场景：用v-for遍历出一个列表list,然后想通过v-if(v-show)控制某条数据的显示/隐藏

这篇文章主要是记录我自己填的一个坑，掉进这个坑里，主要原因还是因为自己在阅读Vue官方文档的时候不够仔细。教训灰常深刻，很难受(;_;)

进入正题，我想做的是一个列表页面，通过点击列表的每一项可以显示或者隐藏这个项目的具体内容。

正常的思路这件小事的html部分应该这么写

<template>
<ul>
<li v-for="(item, index) in list" :key="item.id"><div @click="toggleShow(index)">这里是正常显示的部分，通过点击触发隐藏部分显示或隐藏</div><div v-show="item.show">这里是隐藏的部分</div>
</li>
</ul>
</template>

如果是一般的思路，应该是在点击事件触发以后去操作dom,比如使用jquery的show()和hide()。但是，vue的主要思想是通过数据去驱动视图，因此，这里就不采用Jquery的解决方法,而是通过v-show指令来控制隐藏部分的显示和隐藏。

script部分的写法

<script>
import Vue from 'vue'
export default {name: 'status',data: function () {return {list: [{id: 1,title: '项目一',show: false},{id: 2,title: '项目二',show: false},{id: 3,title: '项目三',show: false}]}},methods: {toggleShow: function (index) {this.list[index].show = !this.list[index].show}
}
</script>

在data部分，通过一个数组list，来存放列表需要显示的项目，每一个项目里面通过一个show属性来控制隐藏部分的显示和隐藏。从思路上面这种写法是正确的，但实际上点击事件并不起作用。后来发现实际上点击事件触发了数组的属性也改变了，只是视图没有更改。
被这个问题困扰了好久，但实际上Vue的官方文档已经给出了解释:

注意事项
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
举个例子：

var vm = new Vue({data: {items: ['a', 'b', 'c']}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题，你可以使用 splice：

vm.items.splice(newLength)

视图没有更新的原因，就在于Vue无法检测数组的更改，正确的方法就是调用vue提供的set方法
重写script部分

<script>
import Vue from 'vue'
export default {name: 'status',data: function () {return {list: [{id: 1,title: '项目一',show: false},{id: 2,title: '项目二',show: false},{id: 3,title: '项目三',show: false}]}},created: function () {methods: {toggleShow: function (index) {let newItem = this.list[index]newItem.show = !this.list[index].showVue.set(this.list, index, newItem)// 一定要注意vue不能检测的几种数据变化情况包括数组和对象}}
}
</script>

v-for与v-if(v-show)的配合使用相关推荐

vector＜int＞ v, vector＜int＞ v(n) 与vector＜int＞ v[n]的区别
一.vector<int> v表示声明一个容器v,并且不给他预定存储空间. 运行: vector<int> v;cout << v.size(); 输出为: 0 二 ...
抖音蓝V如何认证，蓝V号与普通号的区别？
抖音蓝V如何认证,蓝V号与普通号的区别? 先说说抖音蓝V号和普通号的区别,两者之间最大的区别就是:抖音蓝V比普通号拥有更多的商业功能特权,更具有商业价值. 抖音蓝V有哪些功能特权呢? 1.外观功能 ( ...
docker运行redis：windows环境运行挂载目录的正确写法、-v挂载data目录、-v挂载redis.conf配置文件以及设置访问密码
docker run -itd --name redis -v //f/DATA/docker-data/redis:/data -v //f/DATA/docker-data/redis:/etc/ ...
oracle v rman status,RMAN 中V$ARCHIVED_LOG 中STATUS 为X 的文件处理
记录一下[@more@] 今天发现RMAN 中V$ARCHIVED_LOG 中STATUS 为"X" 的文件,想起是因为手动删掉错几个日志造成的,通过如下的方法把RMAN 中的记录 ...
要怎样申请抖音蓝V认证？详谈蓝V认证的步骤
抖音现在是国内非常火的短视频软件,随着用户量的与日俱增,很多商家抓住了商机,开始在抖音宣传自己的商品.而抖音蓝V认证则是快速提升企业品牌知名度的一种渠道,但很多朋友不知道怎么申请蓝V认证,今天就给大家 ...
025 导数的四则求导法则之u+v、uv、u/v求导
025 导数的四则求导法则之u+v及uv u/v求导
自媒体运营之：微博认证怎么弄黄v？（个人橙v认证）
今天跟大家聊一下自媒体运营中关于微博的黄V认证怎么做的问题,微博的用户量很大并且用户活跃度也很高,大家平时也会发现很多热门话题都是从微博火起来的,那么对于我们自媒体运营来说,怎么样去做好微博的运营呢? ...
商业 v. s. 自由 ——W*ndows v. s. 现代UNIX
导读 "天下没有免费的午餐." 这句话只说对了一半.对于软件业,或者更准确一点,自由软件业,这并不一直是对的. 商业软件公司正在控制着我们--普通计算机用户甚至专业的程序员--的大 ...
学习笔记 -- 四元数：$v‘= qvq^{-1}$，证明v‘为虚四元数
【UVA】11991 Easy Problem from Rujia Liu? （整数v第k次出现在什么位置）
https://vjudge.net/problem/UVA-11991 题目大意:就是给你一个序列,然后给出k和v,看整数v第k次出现在该序列的什么位置,没有的话就输出0 结构体(略复杂): #in ...

v-for与v-if(v-show)的配合使用

v-for与v-if(v-show)的配合使用相关推荐

最新文章

热门文章