vue学习笔记（一）--Tab切换

最新推荐文章于 2024-04-24 14:47:12 发布

转载最新推荐文章于 2024-04-24 14:47:12 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/znyu/p/8301708.html

文章标签：

#javascript #ViewUI

本文介绍使用Vue.js框架实现Tab选项卡的基本方法。通过定义组件和数据绑定的方式，实现了Tab选项卡的功能，包括点击切换Tab内容及样式变化。文章提供了一个简单的示例，展示了如何用Vue.js来操作DOM元素。

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

最近在学Vue，写的第一个demo是Tab,刚开始还直接把js代码贴过来改，没觉得有什么不同。然后请教别人说，用Vue最好不要操作dom啦，又把代码做了修改-_-。

html代码如下：

js代码如下：
<script type="text/javascript">
Vue.component("Tab1",{
template:"<p>this is Tab1</p>"
})
Vue.component("Tab2",{
template:"<p>this is Tab2</p>"
})
new Vue({
el:"#tab",
data:{
active:0,
currentView:"Tab1",
lists:[
{type:"tab1",conent:"Tab1"},
{type:"tab2",conent:"Tab2"}
]
},
methods:{
toggle(i,v){
this.active = i;
this.currentView = v;
}
}
})