查漏补缺——说说v-if的使用场景

问题

如题所示

答案

Vue.js教程（三）：v-if条件判断

vue中v-if的常见使用

v-if，条件渲染，也是先对后面的布尔值判断真假，再进行渲染。

相关源码：

<div class="footer-item" v-if="socials.length">
     <div v-for="item in socials" :key="item.id"><a target="_blank" class="out-link" :href="item.href"><i class="iconfont" :class="item.icon"></i>{{item.title}}</a>
	 </div>
</div>

data(){
     return{
          socials: []
     }
},

一开始，我并不是很理解v-if="socials.length"这句代码的意思，今天突然间顿悟了，我们可以看到下面的socials，它是一个数组，那么这句话的定义，这个数组不为空的时候，渲染这个元素。