我们先执行这样的代码
我们的预期是页面能够输出各种颜色
上面的结果确实是符合我们的预期，把flag改为false时结果页面上就没有内容，上面的操作都是符合我们的预期的。
问为什么说v-if和v-for为什么不能连用？
答：这就涉及到了优先级的问题，在vue2中v-for的优先级要比v-if高，所以在执行的时候就会先执行v-for也就是会创建相应的dom节点，如果v-if为false时，就会删除这个dom节点，这样创建以后又删除，会造成页面的卡顿，而且还浪费性能。
怎么避免这种情况？
v-if和v-for可以嵌套使用，比如想要v-if先执行，可以在外面创建一个div标签，把v-if写到这个标签里面。
上面的代码也能够得到一样的结果。但是当v-if为true的时候，我们的外层会多一层div标签
如果不想要外面那层div，我们可以把div标签改为template
结果：
也可以把v-for写外面
结果：
总结：
- 在外层嵌套template（页面渲染不生成dom节点），在这一层先进行v-if判断，然后在内部再进行v-for循环
- 如果判断条件出现在循环内部，把需要v-for的值先在computed计算属性中过滤一次