Vue常用效果

发布时间：2020-12-15 03:29:01 所属栏目：C语言来源：网络整理

导读：table class="html5" tr class="li1" td class="ln"pre class="de1"1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 ? > ? ? ? ? ? ? : @click > {{item}} > ? ? ? ? > ? ? ? ? ? > ? ? ? ? ? ? v-show > {{itemCon}} >

<tr class="li1">
<td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

? > ? ? ? ? ? ? :@click>{{item}}> ? ? ? ? > ? ? ? ? ?> ? ? ? ? ? ? v-show>{{itemCon}}> ? ? ? ? > ? ? > ? ? ? > var vm = new Vue({ ? ? el: '#app',? ? data: { ? ? ? ? tabs: ["标题一","标题二","标题三"],? ? ? ? tabContents: ["内容一","内容二","内容三"],? ? ? ? num: 1 ? ? },? ? methods: { ? ? ? ? tab(index) { ? ? ? ? ? ? this.num = index; ? ? ? ? } ? ? } }); > 使用vue.js实现tab切换很简单，先使用v-for把数据遍历渲染到页面上，v-for中有一个index表示索引，将index作为参数传入到tab（index）这个函数中，在data中定义一个num变量，在title中如果index==num,这个title就会添加一个acive的class。当然，这个num是需要在tab（）这个函数中不断改变的，需要将传入的索引值赋值给num，这样在.tabCon里，我们就可以用v-show做下判断。v-show=”index==num”,如果等于的话，当前的内容就会显示。否则隐藏 https://codepen.io/i-summer/pen/gdvdoy（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!