4 changed files with 63 additions and 1 deletions
@ -0,0 +1,49 @@ |
|||||
|
<html lang="zh-CN"> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> |
||||
|
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"> |
||||
|
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<div id="app"> |
||||
|
<ul class="nav nav-tabs"> |
||||
|
<li @click="()=>{selectType=item.value}" class="nav-item" v-for="(item,index) in typeList" :key="index"> |
||||
|
<a :class="selectType==item.value?'nav-link active':'nav-link'" aria-current="page" |
||||
|
href="#">{{item.name}}</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
<div> |
||||
|
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> |
||||
|
<div class="collapse multi-collapse" id="multiCollapseExample1"> |
||||
|
<div class="card card-body"> |
||||
|
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger. |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</body> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
var vm = new Vue({ |
||||
|
el: '#app', |
||||
|
data: { |
||||
|
selectType: 1, |
||||
|
typeList: [{ name: '淘宝', value: 1 }, { name: '京东', value: 2 }, { name: '拼多多', value: 3 }] |
||||
|
}, |
||||
|
created() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
}, |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
</html> |
||||
Loading…
Reference in new issue