标签：cli v-for display html pad lis src enter back
<html> <head> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> window.onload = function(){ new Vue({ el: "#app", data: { cur: 0, tabtitil: [‘标题一‘,‘标题二‘,‘标题三‘,], tabContent: [‘a‘,‘b‘,‘c‘], cur2: 1, } }) } </script> </head> <body> <div id="app"> <ul class="tab-tit"> <li @click="cur = 0" :class="{active:cur==0}">标题一</li> <li @click="cur = 1" :class="{active:cur==1}">标题二</li> <li @click="cur = 2" :class="{active:cur==2}">标题三</li> </ul> <ul class="tab-con"> <li v-show="cur==0">标题一</li> <li v-show="cur==1">标题二</li> <li v-show="cur==2">标题三</li> </ul> <ul class="tab-tit"> <li v-for="(v,i) in tabtitil" @click="cur2=i" :class="{active:cur2==i}">{{v}}</li> </ul> <ul> <li v-for="(v,i) in tabContent" v-show="cur2===i">{{v}}</li> </ul> </div> </body> <style> ul,li { padding: 0;margin: 0 } .tab-tit li { padding: 10px 15px; text-align: center; list-style: none; cursor: pointer; display: inline-block; } .tab-con li { padding: 10px 15px; text-align: center; list-style: none; cursor: pointer; display: inline-block; } </style> </html>
标签：cli v-for display html pad lis src enter back
原文地址：https://www.cnblogs.com/otways/p/11366886.html
