VUE楼层导航左右联动

欠削的铅笔

已于 2022-05-29 11:39:30 修改

阅读量744

点赞数

分类专栏：新手文章标签： vue.js javascript 前端

于 2022-05-29 11:34:55 首次发布

本文链接：https://blog.youkuaiyun.com/m0_52426249/article/details/125028720

版权

本文介绍如何在Vue.js项目中实现楼层导航的左右联动效果。内容涉及到关键的JavaScript和Vue.js技巧，帮助前端开发者创建动态交互的楼层导航菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="chart">
    <div class="nav">
      <div class="nav-List" v-for="(item,index) in list" :key="item.id" @click="toTarget(index)">
        {
   {
   item.name}}
      </div>
    </div>
    <div class="content">
      <div 
      class="content-item"
      v-for="item in list" :key="item.id">
      {
   {
   item.name}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
   
  data(){
   
    return{
   
      element:{
   
        nav:[],
        content:[]
      },
      list:[
        {
   id:1,name:"F1"},
        {
   id:2,name:"F2"},
        {
   id:3,name:"F3"},