vue左侧点击右边页面内容跟随切换

最新推荐文章于 2025-02-03 22:58:44 发布

璇璇吴

最新推荐文章于 2025-02-03 22:58:44 发布

阅读量933

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/weixin_70027586/article/details/127923563

版权

vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单Tabs组件案例。该组件通过点击左侧的不同选项卡来切换右侧显示的内容。代码中展示了如何定义组件的数据结构、事件处理方法及模板结构。

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

类似tabs选项卡

<template>
	<div>
	  	//左边
	  	<div v-for="(item,index) in list" @click="Click(index)">
	  	{{item}}
	  	</div>
	  	//右边
	  	<div>
	  	{{data[numSay]}}
	  	</div>
	</div>
</template>
<script>
	export default{
       data(){
  		return{
  			numSay:0,
			list:[{1,2,3,4}],
			data:[{
			say:'i love you'
			},{
			say:'我爱你'
			},{
			say:'撒浪嘿'
			}]
  		}
   },
   methods:{
      Click(index){
		this.numSay = index;
		}
	}
}
</script>