vue 中v-if和v-for一起使用；p标签中可以放p标签吗？

记录一下今天项目中踩的两个坑。
数据是从后台取的，然后通过v-for循环展现出来，由于一些原因，获取到后台返回的值是一个空对象，导致报错。想着直接v-if判断一下对象，如果是空就不编译就不会导致循环空对象报错。然后就有了下面的代码。

<div class="" ><p class="a">xxxx</p><p class="value" v-if="item.info" v-for="arr in item.info.list" :key="arr.date">{{arr.money}} {{dateMonth(arr.date)}}</p>
</div>

接下来问题来了，发现加了v-if没有用，继续报错，就在纳闷为什么v-if没有限制住，难倒v-if和v-for不能一起用？？
原因是v-for优先级比v-if高。
官网中说到：
不推荐同时使用 v-if 和 v-for。
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
好吧，然后就想着拿多一个标签包住来进行判断

<div class="" ><p class="a">xxxx</p><p v-if="item.info"> <p class="value" v-for="arr in item.info.list" :key="arr.date">{{arr.money}} {{dateMonth(arr.date)}}</p></p>
</div>

发现还是没有解决问题，打开控制台f12审查元素发现变成了三个并排的p标签，？？？p标签会自己跑出来
原来，p标签虽然是一个块标签，但是不可以存放别的块标签，p标签中放p标签是放不进去的，存放的块标签是在p标签外部的
好吧，改用了div标签来包裹
下面代码，终于解决了问题：

<div class="" ><p class="a">xxxx</p><div v-if="item.info"> <p class="value" v-for="arr in item.info.list" :key="arr.date">{{arr.money}} {{dateMonth(arr.date)}}</p></div>
</div>

vue 中v-if和v-for一起使用；p标签中可以放p标签吗？相关推荐

docker -v 覆盖了容器中的文件_10分钟让你理解 docker 容器中的 uid 和 gid
默认情况下,容器中的进程以 root 用户权限运行,并且这个 root 用户和宿主机中的 root 是同一个用户.听起来是不是很可怕,因为这就意味着一旦容器中的进程有了适当的机会,它就可以控制宿主机上 ...
天正计算机命令大全,天正CAD 中按Ctrl+v在不同图中粘贴出现“未知命令T81_tpasteclip”，直接在CAD中就能操作...
天正CAD 中按Ctrl+v在不同图中粘贴出现"未知命令T81_tpasteclip",直接在CAD中就能操作以下文字资料是由(历史新知网www.lishixinzhi.com)小 ...
Oracle 中一些主要的V$视图种类
Oracle 中一些主要的V$视图种类类别描述和相关的V$视图数据库实例有关实际数据库实例的信息 V$ 视图: V$ACTIVE_INSTANCES,V$BGPROCESS,V$DAT ...
Java 泛型中的 ? T K V E等代表的意思
Java泛型中的标记符含义: E - Element (在集合中使用,因为集合中存放的是元素) T - Type(Java 类) T代表在调用时的指定类型 K - Key(键) V - Value(值 ...
关于v$process与v$session中process的理解(转载)
http://www.itpub.net/thread-1077321-1-1.html(出处) 关于v$process与v$session中process的理解说明 v$session有个proc ...
VCS视频学习中的一个例子代码：dff.v和dff_tb.v
前言 VCS课程中的一个例子! dff.v //r/dff_exp.v module dff_exp(//Inputsinput wire clk_i,input wire rst_l_i,input ...
在Mac中设置Ctrl+C/V进行复制/粘贴
在Mac中设置Ctrl+C/V进行复制/粘贴从Windows世界走入Mac世界,最让不习惯的是在Mac中"复制/粘贴"的快捷键是Command+C/V.而且Command键与C/ ...
vscode 终端进入node_安装了Node.js 从VScode 使用node -v 和 npm -v等命令却无效
前言最近写TypeScript需要安装.配置Node.js环境,楼主是使用的安装包所以环境变量都是自动就配好了(如果是下载的zip压缩包解压后要自己配置到系统环境变量中).打开系统终端敲入命令 no ...
POJ2762 Going from u to v or from v to u? 强连通+缩点
题目链接: poj2762 题意: 给出一幅单向图.问这张图是否满足随意两点ab 都能从a到达b 或从b到达a 题解思路: 推断一幅图是否满足弱连通首先想到的是将图中的强连通分量(能互 ...
事务的四大特性、事务处理开始与结束、v$transactio、 v$LOCK
数据库事务的四大特性:ACID 事务的4大特性(ACID): 原子性(Atomicity):事务是数据库的逻辑工作单位,它对数据库的修改要么全部执行,要么全部不执行.一致性(Consistemcy): ...

vue 中v-if和v-for一起使用；p标签中可以放p标签吗？

vue 中v-if和v-for一起使用；p标签中可以放p标签吗？相关推荐

最新文章

热门文章