为什么li标签嵌套li标签会变成同级?
今天学习v-for指令有个嵌套循环要写效果是这样子
想着li嵌套一个li就行了敲完逻辑没问题但就是不显示,后来才发现li嵌套li变成同级了想明白为什么百度也找不到答案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<style>
li>li {
list-style-type: decimal;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr" :key="item.id">
{{ item.city }}
<ol>
<li v-for="(item2,i) in item.list" :key="item2">
{{ item2 }}
</li>
</ol>
</li>
</ul>
<ul>
<li>1<li>2</li></li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
arr: [
{
id: 1,
city: '北京',
list: ["东城区", "西城区"]
},
{
id: 2,
city: '天津',
list: ["河东区", "河西区"]
}
]
}
})
</script>
</body>
</html>