v-if 和 v-for 一起使用在同一个标签上会怎么样？
看例子：
使用v-for将如下object的所有value遍历显示，其中有一个value是数组
数据：
testData: {
name: 'TESTOBJECT',
id: 10,
data: [1.67, 1.33, 0.98, 2.21]
}
目标运行结果：
TESTOBJECT
10
1.67
1.33
0.98
2.21初步实践：
.html:
<ul>
<li v-for="value in testData">
<div id="test" v-if="Array.isArray(value)" v-for="item in value">{{item}}</div>
<div id="test1" v-else>{{value}}</div>
</li>
</ul>
运行结果：
打印了10遍TESTOBJECT，10遍10，列出数组内容：1.67 1.33 0.98 2.21
为什么会有10个TESTOBJECT呢？尝试多加两个字母’TESTOBEJECTss‘，此时输出12个TESTOBEJECTss，10个10数字
原因分析：v-for优先级高于v-if，因此上面的html文本中两行div的执行大致是以下顺序：
this.value.map(function(item){
if(Array.isArray(value)){
return item; // T E S T O B J E C T
}else{
return value; // TESTOBJECT
}
})遍历object的所有value（即li中的v-for），当拿到testData的第一个元素TESTOBJECT时，执行div中的v-for，此时的item对应T E S T O B J E C T这10个元素，于是循环10次，每一次都判断当前元素是否是array，很显然每次判断都是object，于是便打印出10个TESTOBJECT。
10个数字10的情况类似，不过由于是遍历一个数字，那么数字大小就影响循环的次数，如果改为5，则运行显示5遍5.
小结：
vue官网推荐将v-if移到父元素，如ul中，先检查，后循环遍历。不要用在同一个元素上。
对上面例子进行如下修改：
<ul>
<li v-for="value in testData">
<div v-if="Array.isArray(value)">
<div v-for="item in value">{{item}}</div>
</div>
<div v-else>{{value}}</div>
</li>
</ul>
运行结果：
TESTOBJECT
10
1.67
1.33
0.98
2.21本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！