<!DOCTYPE html>
<html lang="en">
aaa
<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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
background-color: aquamarine;
width: 20%;
height: 100%;
/* height: 8vmin; */
/* margin: 10vmin auto; */
}
li {
line-height: 25vmin;
text-align: center;
/* display: inline-block; */
list-style-type: none; /* 去掉无序列表的小黑点 */
/* width: 20%; */
}
li:hover {
background-color: orangered;
}
.color {
background-color: red;
}
.item{
/* font-family: "华文新魏"; */
font-size: 4em;
font-family: "华文行楷"
}
.a {
font-family: 'Courier New', Courier, monospace;
font-size: 20px;
/* vertical-align: middle; */
}
.small{
font-family: "华文行楷";
font-size: 4em;
}
.main {
width: 80%;
}
.main div{
text-align: center;
height: 100px;
margin: 0 auto;
}
.mains {
display: flex;
justify-content:space-between;
}
</style>
</head>
<body>
<div class="mains">
<ul>
<li class="color">企业简介</li>
<li>企业动态</li>
<li>产品展示</li>
<li>成功案例</li>
<li>行业资讯</li>
</ul>
<div class="main" id="app-4">
<div class="item" style="display: block;">
鲜衣怒马少年郎，对镜自怜夜不眠
<table class="table">
<thead>
<tr>
<th scope="col" v-for="(item,key,index) in liZhicheng[0]" :key="index">{{key}}</th>
</tr>
</thead>
<tbody class="a">
<tr v-for="(item,key,index) in liZhicheng" :key="index">
<th v-for="(item,key,index) in item" :key="index">
<template v-if="key == 'image'">
<img :src="item" alt="Image" width="50px" height="50px">
</template>
<template v-else>
{{ item }}
</template>
</th>
</tr>
</tbody>
</table>
</div>
<div class="item" style="display: none;">
我与春风携过客，你携秋水揽星河
</div>
<div class="item" style="display: none;">
远赴人间惊鸿宴，一睹人间盛世颜
</div>
<div class="item" style="display: none;">
少年曾许凌云志，取得人间第一流
</div>
<div class="item" style="display: none;">
别人笑我太疯颠，我笑他人看不穿
</div>
</div>
</div>
<div>
</div>
</body>
</html>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
],
liZhicheng: 'sdvgvdg'
},
mounted() {
axios.get('http://localhost:8080/student/page', {
params: {
page: 1,
pageSize: 2
}
}).then((result) => {
console.log(result.data)
this.liZhicheng = result.data.data.records;
var a = Object.keys(this.liZhicheng);
console.log(a);
console.log(this.liZhicheng[0]);
})
},
methods: {
isURL(value) {
// 使用正则表达式验证是否为 URL
// 这里只是一个简单示例，请根据实际情况进行更复杂的验证
if (value.contains('http')) {
return true;
}
}
}
})
var lis = document.querySelectorAll('li')
var items = document.querySelectorAll('.item')
for (i = 0; i < lis.length; i++) {
lis[i].setAttribute('index', i)
lis[i].onclick = function () {
for (var i = 0; i < lis.length; i++) {
lis[i].className = ''
}
this.className = 'color'
var index = this.getAttribute('index')
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none'
}
items[index].style.display = 'block'
}
}
</script>
1722
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
