以下是我的html代码请根据我的代码设计一个vuejs代码!DOCTYPE htmlhtmlhead meta http-equiv=Content-Type content=texthtml; charset=UTF-8 title对局环境title link rel=stylesheet type=textcss href=cssys6css link rel=stylesheet type=

<p>根据您的HTML代码，以下是相应的Vue.js代码：</p>
<template>
  <div id="app">
    <nav id="nav">
      <div>
        <h1>
          <a href="###" class="logo">王者荣耀</a>
        </h1>
        <ul>
          <li><a href="gwsy.html">官网首页</a><em>HOME</em></li>
          <li><a href="yxjs.html">游戏介绍</a><em>DATA</em></li>
          <li><a href="yxgl.html">游戏攻略</a><em>STRATEGY</em></li>
          <li><a href="wzyyt.html">王者音乐听</a><em>MUSIC</em></li>
          <li><a href="yxbz.html">游戏壁纸</a><em>WALLPAPER</em></li>
          <li><a href="djhj.html">对局环境</a><em>CONFRONTATION</em></li>
        </ul>
      </div>
    </nav>
    <header id="header">
      <div class="zynr">
        <div class="djhj1">
          <div class="xyxt1" v-for="news in newsList" :key="news.date">
            <div class="xyxt1_bt1">
              <span class="sj1">{{ news.date }}</span>
            </div>
            <div class="xyxt_nr1">
              <div class="xyxt_wz1">
                <p class="wz1">{{ news.title }}</p>
                <p class="wz2">{{ news.subtitle }}</p>
                <p class="wz2">{{ news.description }}</p>
              </div>
              <a href="" class="wz3">查看更多</a>
            </div>
          </div>
        </div>
        <div class="djhj2">
          <ul>
            <li v-for="case in caseList" :key="case.id">
              <div :class="`tp${case.id}`"></div>
              <a href="" class="alzs1">{{ case.title }}</a>
              <p class="alzs2">{{ case.description }}</p>
            </li>
          </ul>
        </div>
        <a href="" class="alzs3">更多经典案列</a>
      </div>
    </header>
  </div>
</template>
<script>
export default {
  data() {
    return {
      newsList: [
        {
          date: "2019.10.17",
          title: "信誉系统界面升级",
          subtitle: "信誉系统新改版",
          description: "等级奖励一目了然"
        },
        {
          date: "2019.8.8",
          title: "信誉积分规则优化",
          subtitle: ""
        },
        {
          date: "2019.1.9",
          title: "信誉系统专属皮肤",
          subtitle: ""
        },
        {
          date: "2018.12.26",
          title: "信誉积分上线分段奖励",
          subtitle: ""
        },
        {
          date: "2018.10.31",
          title: "信誉系统全新改版解读",
          subtitle: ""
        }
      ],
      caseList: [
        {
          id: 1,
          title: "案例展示",
          description: "在队友打野过程中，推红蓝buff"
        },
        {
          id: 2,
          title: "案例展示",
          description: "冲到敌方防御塔下后完全不动的张飞"
        },
        {
          id: 3,
          title: "案例展示",
          description: "为什么我举报别人挂机，他只扣了一分？"
        }
      ]
    };
  }
};
</script>
<style scoped>
/* Add your custom CSS styles here */
</style