今天我想用Vue实现选项卡,去百度搜了一搜也没有什么实际的,可直接帮助大家实现的代码,那今天我就给大家看下我写好的代码,可能有一些问题也希望大家帮我改正,但是效果实现了，好了废话少叙:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
input{margin-right:10px;}
#box div{width:200px;height:200px; background: red;margin-top:10px;display: none;}
#box div.on{display:block;}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
arr:['1','2','3'],
acclass:'on',
a:1
},
methods:{
show:function(index){
this.a=index+1
}
}
})
}
</script>
</head>
<body>
<div id="box">
<input type="button" name="" value="按钮" v-for="n in arr" @click="show($index)"/>
<div v-for="n in arr" class="{{a==n?acclass:'';}}" v-show="a">0{{n}}0</div>
</div>
</body>
</html>