SOURCE

var users = new Vue({
  el: '#user',el2:'#birthDate',
  data: {
    users: [
      { name: '张三', gender:true,birth:'2000-1-1',color:'red',orderlist:
      [{orderid:'0001',goods:'1.电脑,2.笔记本,3.键盘,4.鼠标'
      },
      {orderid:'0002',goods:'1.上衣,2.裤子,3.帽子,4.衬衫'
      }
      ]
      },
      
      {  name: '李四', gender:false,birth:'2010-1-1',color:'green' ,orderlist:
       [{orderid:'0003',goods:'1.电脑,2.笔记本,3.键盘,4.鼠标'
      },
      {orderid:'0004',goods:'1.上衣,2.裤子,3.帽子,4.衬衫'
      }
      ]
      },
      {  name: '王五', gender:true,birth:'1990' ,color:'blue',orderlist:
       [{orderid:'0005',goods:'1.电脑,2.笔记本,3.键盘,4.鼠标'
      },
      {orderid:'0006',goods:'1.上衣,2.裤子,3.帽子,4.衬衫'
      }
      ]
      }
      
    ],
    currentuser:{ name: '张三', gender:true,birth:'2000-1-1',color:'red'}
   
  },
   methods: {
   
    birth2age:function(item){
     return Math.round((new Date() - new Date(item))/(365*24*60*60*1000)) ;
    },
  	 birthShow:function(birth){
   		 alert(JSON.stringify(arguments));
    },
     confirm: function (name,gender,age) {
     
      confirm('姓名：'+name+ ',年龄：'+age+',性别:'+gender)
    }
   }
  
  
})

<div id="user">
<h2>欢迎您登录本系统{{currentuser.name}}</h2>
  <div v-for="user in users"> 
    <ol >
      <li >
         姓名：<span v-bind:style='{color:user.color}'>{{user.name}}</span><br>
      </li>
      <li>
        性别：<span v-if="user.gender">男</span><span v-else>女</span><br>
      </li>
      <li>
        出生日期：<span >{{user.birth}}</span><br>
      </li>
      <li>
         年龄：<span v-bind:title='user.birth'>{{birth2age(user.birth)}}</span>
         <br><br>
      </li>
     
    </ol>
    
    <div>订单列表：
      <ol v-for="order in user.orderlist">
        <li>
          <p>{{order.orderid}}</p>
          <p>{{order.goods}}</p>
        </li>
      </ol>
    
    </div>
    
     <button v-on:click="confirm(user.name,user.gender,birth2age(user.birth))">显示用户信息</button><br><br>
    
  </div>
  
  <div>
  
  </div>
  
  
  
</div>

  
  
  
</div>

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#user {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  color:#000;
  font-weight: bold;
  margin-bottom: 15px;
}