网站DOM显示<ul>和<li>标签异常：卡片展示时代码外露求助

问题根源 #

• 你错误地给<ul>标签使用了自闭合写法：在标准HTML和Vue模板解析规则里，<ul>是需要包含子元素的容器标签，不能写成<ul v-for="(fish, i) in fishes" :key="i" />这种自闭合形式。这个写法会让Vue将其解析为一个空的<ul>节点，后续的<li>会变成<ul>的兄弟元素，而非嵌套在内部的子元素。
• 浏览器无法识别这种不符合列表嵌套规则的结构，会把<li>及内部标签当作普通文本内容直接渲染到页面上，因此你会看到<ul>、<li>这些HTML代码直接显示出来。

修正后的代码 #

<div class="app">
  <h1> All Fishes and Their Photos</h1>
  <ul v-for="(fish, i) in fishes" :key="i">
    <li>
      <div class="maincontainer">
        <div class="back">
          <p>{{fish['Biology']}}</p>
        </div>
        <div class="front">
          <div class="image">
            <img :src="fish['Species Illustration Photo'].src" />
            <h2>{{ fish['Species Name']}}</h2>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

内容的提问来源于stack exchange，提问作者Lazy Loafs