zoukankan      html  css  js  c++  java
  • 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.待续

  • 相关阅读:
    js操作
    函数知识点补充
    css---position
    css-浮动
    css-边界重叠以及边界塌陷
    css
    css文本类型操作
    POJ 2828 线段树活用
    POJ 3468 线段树
    POJ 3013 SPFA算法,邻接表的使用
  • 原文地址:https://www.cnblogs.com/whitewen/p/9300726.html
Copyright © 2011-2022 走看看