vuejs 2.0 tabs

<!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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容