530 vue 基礎語法範例匯總 一個模擬tab顯示
阿新 • • 發佈：2018-05-31
javascrip RR body 當前 AC IV function charset 增加 <!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顯示