<template id="myName"> <div> <ul> <li v-for="(list,index) in data" v-on:click="n=index">{{list.title}}</li> </ul> <div v-for="(list,index) in data" v-show='index==n'>{{list.content}}-{{a}}</div> </div> </template> <div id="app"> <!-- tab切換 --> <my-name v-bind:data="lists" :a='2'></my-name> <hr> <my-name v-bind:data="lists2"></my-name> </div>
js:
<script> new Vue({ el:'#app', data:{ n:0, lists:[ {title:'标題1',content:'内容1'}, {title:'标題2',content:'内容2'}, {title:'标題3',content:'内容3'}, {title:'标題4',content:'内容4'}, ], lists2:[ {title:'AAA',content:'内容1'}, {title:'BBB',content:'内容2'}, ], }, components:{ //組件 'my-name':{ //組件的名稱 template:'#myName', data(){ return { n:0 } }, props:['data','a'] //組件中父-子傳參 }, } }); </script>
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
