1.頁面加載默認一個初始的isact,讓第二個div.f具有一個on的類；在點擊的時候，傳入一個值給data.isact

1 <template>
2     <nav class="clearfix">
3       <div class="fl" :class="{on:‘zh‘==isact}" @click="refresh(); changeLangEvent(‘zh‘)" v-text="$t(‘m.p_0002‘)"></div>
4       <div class="fl" :class="{on:‘en‘==isact}" @click
 
="refresh(); changeLangEvent(‘en‘)" v-text="$t(‘m.p_0003‘)"></div>
5     </nav>
6 </template>

 1 export default {
 2   name: ‘Login‘,
 3   data () {
 4     return {
 5       ‘isact‘: ‘en‘, // 索引為0的tab添加 class=‘on‘,此處應該由內存中獲取
 6     }
 7   },
 8   methods: {
 9     ‘refresh‘: refresh,
10
 
     ‘changeLangEvent‘: changeLangEvent
11   }
12 }
13 /**
14  * 切換語言
15  * */
16 function changeLangEvent (lang) {
17   if (lang === ‘en‘) {
18     this.$i18n.locale = ‘en‘
19     this.$validator.locale = ‘en‘ // 表單驗證提示語言設置為‘en‘
20   } else {
21     this.$i18n.locale = ‘zh‘
22     this.$validator.locale = ‘zh‘
23
 
   }
24   localStorage.setItem(‘language‘, lang)
25   this.isact = lang
26 }

2.利用mint-ui的控件，可以雙向綁定

 1 <template>
 2 　　<mt-tab-container v-model="selected">
 3       <mt-tab-container-item id="T">
 9       </mt-tab-container-item>
10       <mt-tab-container-item id="P">
15       </mt-tab-container-item>
16     </mt-tab-container>
17 </template>

 1 export default {
 2   name: ‘ProjectList‘,
 3   data () {
 4     return {
 5       selected: ‘T‘23     }
24   }37 }

3.待續

vue 點擊修改樣式