<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="vue.js"></script>
<style type="text/css">
.act{color:red;
background-color:yellow;}
#zuj div{
display:none;
width:130px;
height:100px;
background-color:#5E5353;
color:#EAE8E8;
}
#zuj div.show{
display:block;
}
.fz{font-size:36px;}
</style>
</head>
<body>
<div id="zuj" >
<button v-for="(itm,idx) in arr"
:class="{act:idx==nowidx}" @click=‘nowidx=idx‘>
<!-- <[email protected]=‘chgidx(idx)‘>循环加载列表内的东西,加载样式类,增加了一个加载条件及 当前idx等于指定值是进行加载
chgidx(idx) 以加参数方式传递到方法之中-->
{{idx +1}}
</button>
<div v-for="(itm,idx) in arr" :class="{show:idx==nowidx}">{{itm}}</div>
<!-- 加载文字内容 -->
</div>
</body>
<script type =‘text/javascript‘>
var vm = new Vue({
el:‘#zuj‘,
data:{
arr:[‘d1编码1‘,‘d2编码2‘,‘d3编码3‘,‘d4编码4‘,‘d4‘],
nowidx:0, //初始值//
},
methods:{
chgidx:function(index){
this.nowidx=index
},
}
})
</script>
</html>
原文地址：https://www.cnblogs.com/xfym888/p/9114215.html