<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
input {
width: 100px;
height: 50px;
border: 0;
outline: none;
font-size: 25px;
cursor: pointer;
}
.active {
background: pink;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<input @click="test(index)" v-bind:class="{active:index == i}" v-for="item,index in jsonList" type="button" name="" id="" v-bind:value="item.title" />
<div v-for="item,j in jsonList" v-bind:style="{display:j === i ? 'block' : 'none'}">
<div v-for="items in item.conentList">{
{items.con}}</div>
</div>
</div>
<script type="text/javascript">
let jsonList = [{
title: "工具",
conentList: [{
con: "图片下载工具"
},
{
con: "视频下载工具"
},
{
con: "数字万能工具"
}
]
},
{
title: "图片",
conentList: [{
con: "图片1"
},
{
con: "图片2"
}
]
},
{
title: "文章",
conentList: [{
con: "文章1"
},
{
con: "文章2"
},
{
con: "文章3"
}
]
},
]
var app = new Vue({
el: "#app",
data: {
jsonList,
i: 0
},
methods: {
test(index) {
this.i = index;
}
}
});
</script>
</body>
</html>