美文网首页
vuejs 2.0 tabs

vuejs 2.0 tabs

作者: 北方蜘蛛 | 来源:发表于2016-09-28 00:50 被阅读342次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.red{ color:red}
.black{color:#000}
.active{ color:red}
</style>
</head>

<body>
<div id="app">
    
  <template v-for="(t,index) in lists">
    <h1  :class="t.ca" @click="active(index)">{{ t.title }}     </h1>
    <div v-show="t.ca == 'active'">{{ t.content }} </div>
  </template>
   
</div>


<script src="http://cdn.bootcss.com/vue/2.0.0-rc.7/vue.min.js"></script>
<script>


var app = new Vue({
    el:'#app',
    data: {
    lists:null,
    foo:2,
    style:'color:red',
    },
    methods:{
        nimabi:function(n)
      {
            alert(this.foo+10*n)
      },
      addItem : function(){
 
        
      }
      ,remove:function(index)
      {
            this.todos.splice(index,1)
            console.log(index)
         
      },
      active:function(index)
      {    
         
          for(i in this.lists){
               
               if(i == index){
                  this.lists[i].ca = 'active'
               }else{
                  this.lists[i].ca = 'haha'
               }
             
          }
        
      },
      fetchData:function()
      {
         
        var lists = [{id:1,title:'nimabi',content:'xxxxxxxxxxxxxxxxxxxxxxxx'},{id:2,title:'caonima',content:'hahahahahahahahhahhahahahahahah'}];
        for(i in lists)
        {
          lists[i].ca = "hahah"
        }
        this.lists = lists
        
        
      }
     
      
      
    },
    created:function(){
      
        this.fetchData()
        this.lists[0].ca = 'active'
    }
    
    
})
</script>


<body/>

</html>

相关文章

网友评论

      本文标题:vuejs 2.0 tabs

      本文链接:https://www.haomeiwen.com/subject/pejhyttx.html