vue 点击修改样式

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.待续

原文地址：https://www.cnblogs.com/whitewen/p/9300726.html