效果图
1.使用异步组件
2.数组
<template>
<div class="ai-module-scene">
<div class="ai-module-scene-main">
<div class="ai-module-scene-main-title">应用场景</div>
<div class="ai-module-scene-main-content">
<div class="content-left">
<div
v-for="(item, index) in applySceneData"
:key="item.title"
class="left-item "
:class="leftItemActive == index ? 'itemActive' : ''"
@click="selectItem(index)"
>
{{ item.title }}
</div>
</div>
<div class="content-right">
<div class="content" v-if="applySceneData !== null && applySceneData !== undefined">
<div class="content-title">{{applySceneData[leftItemActive].title}}</div>
<div class="content-content">
{{applySceneData[leftItemActive].content}}
</div>
<div class="content-img">
<img :src="applySceneData[leftItemActive].pic" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["applySceneData"],
data() {
return {
leftItemActive: 0,
};
},
methods: {
selectItem(i) {
this.leftItemActive = i;
},
},
};
</script>