• 中文
    • English
  • 注册
    • 查看作者
    • ElementUi框架和vue.js动态绑定class样式类名

      需求:

      实现如下图所示,当我们点击菜单时,改变菜单色体的颜色。

      ElementUi框架和vue.js动态绑定class样式类名

      实现方法:

      1、定义一个css样式:

      <style>
        .actived{color:#0EC5A1;}
      </style>

      2、data数据里定义一个变量

      <script type="text/javascript">
      new Vue({
          el: '#main',
          data: function() {
          return {
      	activeIndex:"panel",
          }
      },

      3、html里的代码:

      <!--导航菜单-->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" :class="{'actived': activeIndex == 'panel'}"  @click="switchMenu('panel')">数据面板</div>
          <div class="swiper-slide" :class="{'actived': activeIndex == 'order'}"  @click="switchMenu('order')">订单列表</div>
        </div>
      </div>

      解析:

      :class="{'actived': activeIndex == 'panel'}" 这段代码的意思是:当activeIndex变量的值等于panel时,就给这个元素添加actived样式。

    • 1
    • 0
    • 0
    • 163
    • quweisu

      请登录之后再进行评论

      登录
    • 返回顶部
    • 做任务
    • 实时动态
    • 偏好设置
    • 到底部
    • 单栏布局 侧栏位置: