以下是我的html代码请保留我的代码原有的信息然后根据我的代码设计一个vuejs代码是我的页面更好看!DOCTYPE htmlhtmlhead meta http-equiv=Content-Type content=texthtml; charset=UTF-8 title对局环境title link rel=stylesheet type=textcss href=cssys6css link
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>对局环境</title>
<link rel="stylesheet" type="text/css" href="css/ys6.css">
<link rel="stylesheet" type="text/css" href="css/wztb.css">
<link rel="stylesheet" type="text/css" href="css/vue.css">
</head>
<body>
<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">
<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.subtitle1 }}</p>
<p class="wz2">{{ news.subtitle2 }}</p>
</div>
<a href="" class="wz3">查看更多</a>
</div>
</div>
</div>
<div class="djhj2">
<ul>
<li v-for="case in caseList">
<div :class="case.class"></div>
<a :href="case.link" class="alzs1">{{ case.title }}</a>
<p class="alzs2">{{ case.subtitle }}</p>
</li>
</ul>
</div>
<a href="" class="alzs3">更多经典案列</a>
</div>
</header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
newsList: [
{
date: '2019.10.17',
title: '信誉系统界面升级',
subtitle1: '信誉系统新改版',
subtitle2: '等级奖励一目了然'
},
{
date: '2019.8.8',
title: '信誉积分规则优化',
subtitle1: '',
subtitle2: ''
},
{
date: '2019.1.9',
title: '信誉系统专属皮肤',
subtitle1: '',
subtitle2: ''
},
{
date: '2018.12.26',
title: '信誉积分上线分段奖励',
subtitle1: '',
subtitle2: ''
},
{
date: '2018.10.31',
title: '信誉系统全新改版解读',
subtitle1: '',
subtitle2: ''
}
],
caseList: [
{
class: 'tp1',
link: '',
title: '案例展示',
subtitle: '在队友打野过程中，推红蓝buff'
},
{
class: 'tp2',
link: '',
title: '案例展示',
subtitle: '冲到敌方防御塔下后完全不动的张飞'
},
{
class: 'tp3',
link: '',
title: '案例展示',
subtitle: '为什么我举报别人挂机，他只扣了一分？'
}
]
}
})
</script>
</body>
</html
原文地址: http://www.cveoy.top/t/topic/hFzC 著作权归作者所有。请勿转载和采集!