<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue-选项卡</title> <style> .box{ width:300px; border:1px solid #000; } button{ width:100px; height:50px; } .box div{ width:300px; height:300px; line-height:300px; text-align: center; font-size: 40px; } </style> </head> <body> <div id="app"> <div class="box"> <button v-for="(item,index) in btnVal" :key="item.id" @click="card(index)">{{item}}</button> <div v-text="textVal[indexA]"></div> </div> </div> </body> </html> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm = new Vue({ el:'#app', data:{ indexA: 0, btnVal:["选项一","选项二","选项三"], textVal:["内容一","内容二","内容三"] }, methods:{ card(index){ this.indexA = index; } } }) </script>
Vue.js----使用vue简单写个选项卡
猜你喜欢
转载自www.cnblogs.com/snowstorm22/p/10364176.html
今日推荐
周排行