Vue v-show

关于vue v-show的一点不得不说的地方。

通常
v-show=“flag” 来判断标签是否显示，data中的flag是boolean值。

but
but
but

如果flag是个数组呢？
业务中不可避免会遇到这种情况。
例如

<template><div><div  @mouseover="showOrHideDiv" style="width:100px;height:100px" v-show="flags[0]"></div><div  @mouseover="showOrHideDiv" style="width:100px;height:100px" v-show="flags[1]"></div><div  @mouseover="showOrHideDiv" style="width:100px;height:100px" v-show="flags[2]"></div></div>
</template><script>
export default{data(){return{flags:[false,false,false],}},methods:{showOrHideDiv(a){var index = a.target.attributes.l.value;this.flags[index].flag=this.flags[index];}}
}
</script>

代码加了点mouseEvent的东西，看不懂没关系，只要知道点击每个div，对应的flags[index],就会改变值，从而引起三个div出现消失，

but
but
but

没有任何反应，为啥？
不知道，我也不知道。。
可能vue留下的bug吧。。。如果又大佬知道原因，麻烦告知。

将flags数组修改成对象就可以了

如下：

flags:[{flag:false},{flag:false},{flag:false},],v-show中的flags【x】改成flags[x].flag

不知道为什么只能用数组对象，却不能用一般数组。

如果有用，感谢观看。

                           --来自苦逼的码农

Vue v-show相关推荐

vue -V 执行失败檔案名稱、目錄名稱或磁碟區標籤語法錯誤。
vue -V 执行失败提示 :檔案名稱.目錄名稱或磁碟區標籤語法錯誤. 安装 @Vue/cli 流程 yarn global add @vue/cli yarn global v1.22.10 [1 ...
VScode输入vue -V提示vue : 无法加载文件
问题1: Suggestion [3,General]: 找不到命令 vue,但它确实存在于当前位置.默认情况下,Windows PowerShell 不会从当前位置加载命令.如果信任此命令,请改为 ...
vue -V查看vue版本时，提示vue.js缺少标识符
vue -V查看vue版本时,提示vue.js缺少标识符出现的错误提示如下图. 我的解决办法: win+R打开 cmd 输入 where vue. 找到D:\a_tools\vue,删除该文件夹中的 ...
vue v html安全,vue 中控制v-html 中的样式，但不影响全局的小技巧
我们知道在 Vue 中,style可以用两种方式来导入: // method1 @import ('./a.css'); //method2 复制代码但是不管哪一种,导进的css文件都是应用于全局的 ...
vue 不是内部或外部命令,也不是可运行的程序或批处理文件
vue 安装 vue-cli 成功之后控制台查看vue的版本提示 vue 不是内部或外部命令,也不是可运行的程序或批处理文件我的问题就环境变量没有配置下面以window 10 系统说下我的 ...
cli vue 卸载,vue Cli 环境删除与重装教程 - 版本文档
vue-cli 卸载,版本选择,安装 · 检测(图文教程:vue Cli 环境删除与重装) 重要说明: vue-cli 3.0+版本,使用的不是vue-cli,而是@vue/cli: 如果用以上的安装 ...
Java项目:员工管理系统(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
源码获取:博客首页 "资源" 里下载! 一.项目简述本系统功能包括:分为前端翻后端部分,包括用户,区分晋通用户以及誉里员用户,包括首页展示,部门管理,人事管理,员工管理三个模块等 ...
基于Idea从零搭建一个最简单的vue项目
一.需要了解的基本知识 node.js Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.N ...
Spring Boot + Vue 如此强大？
欢迎关注方志朋的博客,回复"666"获面试宝典虽然 B/S 是目前开发的主流,但是 C/S 仍然有很大的市场需求.受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而 ...
Spring Boot + Vue 如此强大？竟然可以开发基于 C/S 架构的应用
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章来源:xiangzhihong sf.gg/a/119000002 ...

Vue v-show

but
but
but

but
but
but

将flags数组修改成对象就可以了

如果有用，感谢观看。

Vue v-show相关推荐

最新文章

热门文章

Vue v-show

but but but

but but but

将flags数组修改成对象就可以了

如果有用，感谢观看。

Vue v-show相关推荐

最新文章

热门文章

but
but
but

but
but
but