v-for 中嵌套使用 v-if 报错
是我哪里写错了吗?
<body>
<div id="test">
<p v-for="d in hhh">
{{ d }}
{{ d.type }}
{{ d.msg }}
<h1 v-if=" d.type == 'h1' "> {{ d.msg }} </h1>
<h2 v-if=" d.type == 'h2' "> {{ d.msg }} </h2>
<h3 v-if=" d.type == 'h3' "> {{ d.msg }} </h3>
</p>
</div>
</body>
<script src="../vue.js"></script>
<script >
let vm= new Vue({
el:"#test",
data:{
hhh:[
{
'type':'h1',
'msg':'h1h1h1'
},
{
'type':'h2',
'msg':'h2h2h2'
},
{
'type':'h3',
'msg':'h3h3h3'
},
]
},
});
</script>
下面是浏览器的报错信息:
[Vue warn]: Property or method "d" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
[Vue warn]: Error in render function: "TypeError: Cannot read property 'type' of undefined"
1
U2Fsd 2017-08-29 14:17:34 +08:00 1
|
2
xiaome 2017-08-29 14:18:07 +08:00
当它们处于同一节点,v-for 的优先级比 v-if 更高
https://cn.vuejs.org/v2/guide/list.html#v-for-with-v-if |