vue实践——tab切换

原生js的tab切换思路是这样的:

1.先将导航栏循环,得到每个单独的导航栏项

2.将循环的导航栏项进行点击

3.再进行一步循环,其他兄弟元素隐藏,拥有当前index值显示出来,当前类名改变,其他的类名变回公共类名

原生js的tab切换基本就是两步循环,一次循环导航,一次循环内容,两步嵌套实现切换

jquery的tab切换思路和原生完全一样。

进入正题~~~~

vue是MVVM框架,那我们操作mvvm的时候就尽量不要操作dom,而是进行数据的改变,从而实现切换,这也是vue的核心思想,双向数据绑定

先说一下vue的tab切换的思路:

1.我们现在data中定义两个变量,一个是控制状态的变量,我们起名叫active,active表示状态,初始化为0

二是导航栏的内容列表,我们起名叫list,list初始化可以是个数组或者json

2.我们要通过active的改变控制tab的切换

3.在导航状态中我们加入一个v-for循环,绑定一个class,点击的时候,给这个导航一个点击事件,

点击事件主要是改变active这个状态的改变

4.内容部分要通过v-if进行改变,每次判断active的状态,来进行改变内容

废话不多说,上代码




 

你可能感兴趣的:(vue学习)