530 vue 基础语法范例汇总 一个模拟tab显示
Posted xfym888
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了530 vue 基础语法范例汇总 一个模拟tab显示相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于530 vue 基础语法范例汇总 一个模拟tab显示的主要内容，如果未能解决你的问题，请参考以下文章