码迷,mamicode.com
首页 > 其他好文 > 详细

530 vue 基础语法范例汇总 一个模拟tab显示

时间:2018-05-31 02:52:12      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:参数   method   初始   UNC   增加   his   for   src   body   

<!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‘>
    <!-- <!-@click=‘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显示

标签:参数   method   初始   UNC   增加   his   for   src   body   

原文地址:https://www.cnblogs.com/xfym888/p/9114215.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!