请老师指教，谢谢。
来源：2-4 常用模版语法讲解（1）
临溪倚山靠
2022-04-04 14:44:03
老师，为什么第二个有序列表显示不出来？是那部分写错了吗？请老师帮忙修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
*{
margin: 0;
padding: 0;
}
#app {
width: 1200px;
height: 20px;
background-color: aquamarine;
}
#app ul {
list-style: none;
}
#app ul li {
float: left;
margin-right: 20px;
}
#app ul li:first-child {
margin-left: 30px;
}
#apptwo ol {
list-style: none;
}
</style>
</head>
<body>
<div id="app">
<ul>
<!-- 有序列表，无序列表的v-for值都是site in sites -->
<li v-for="site in sites">
<!-- 必须这样写 -->
{{site.text}}
</li>
</ul>
</div>
<div id="apptwo">
<ol>
<li v-for="site in sites"></li>
{{site.text}}
</ol>
</div>
<script>
const listApp = {
data(){
return {
sites:[
{text:'珠穆朗玛峰'},
{text:'喜马拉雅山'},
{text:'雅鲁藏布江'},
{text:'布达拉宫'},
{text:'纳木错'},
{text:'玉龙雪山'}
]
}
}
}
Vue.createApp(listApp).mount('#app')
</script>
<script>
const olapp = {
data(){
return {
sites:[
{text:'西藏拉萨'},
{text:'西藏林芝'}
]
}
}
}
Vue.createApp(olapp).mount('#apptwo')
</script>
</body>
</html>
1回答
-
好帮手慕久久
2022-04-04
同学你好，要把插值表达式写在li中间才行：
祝学习愉快！
0
相似问题