v-if和v-else踩坑日记

v-if和v-else感觉已经非常非常… 熟悉了，但是最近做项目的时候还是踩坑了，半天没反应过来产生bug的原因，真的是越简单的东西越容易被忽视啊

让我来描述一下我这低级的bug

协议有两种方式展示，一种是服务端将pdf的链接下发到前端，由前端进行展示，一种是服务端下发html字符串，前端进行解析渲染，然后在服务端返回的是pdf的链接的时候，我这边先展示了一大串html字符串，后来才展示pdf，我是咋写的呢，由于代码保密性，我就只大概模拟看下

<div v-if="type==='1' && pdf">展示pdf</div>
<div v-else>展示html字符串</div>

服务端返回的type明明是1，为啥不展示pdf，先展示了一大堆其他的啊，后来发现是因为&&后面的这个惹的祸，因为开始的时候只满足了type===‘1’ ，而不满足type===‘1’ && pdf，所以它默认先走了v-else，等同时满足type===‘1’，又拿到pdf的时候就会展示pdf了，所以这时候为了避免这个问题，就可以这样写

<div v-if="type==='1' && pdf">展示pdf</div>
<div v-if="type !=='1'">展示html字符串</div>

问题解决～继续去搬砖了