vue实现一个简单的选项卡
Posted 紫诺花开
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue实现一个简单的选项卡相关的知识，希望对你有一定的参考价值。
用vue来实现一个小的选项卡切换，比之前要简单、方便很多。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/vue.min.js"></script> <style> button{ width:40px; height:30px; text-align:center; border:none; cursor: pointer; } .active{ background:red; color:#fff; border:none; } </style> </head> <body> <div id="app"> <button v-for="(val,key) in box" @click="changes(key)" :class="{active:key == num}" >{{key+1}}</button> <div v-for="(val,key) in box" v-show="key==num" >{{val}}</div> </div> <script> /* 运用知识点： v-for v-on,简写@ v-bind简写: v-show 思路： 循环数据，当点击时候，把key传到changes方法中，然后num赋值给active 循环数组，只要box中key等于num就让它显示出来 */ new Vue({ el:‘#app‘, data:{ box:[‘俄克拉荷马‘,‘萨克拉门托‘,‘明尼苏达‘], num:0 }, methods:{ changes(key){ this.num = key; } } }); </script> </body> </html>
以上是关于vue实现一个简单的选项卡的主要内容，如果未能解决你的问题，请参考以下文章