Vue2.0点击切换类名改变样式

伏见伊奈里

7684人浏览 · 2017-01-05 16:51:38

伏见伊奈里 · 2017-01-05 16:51:38 发布

Vue2.0点击切换类名改变样式

使用index

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue导航</title>
  <style media="screen">
  *{
    margin:0;
    padding: 0;
  }
  ul li{
    list-style: none;
  }
  .navul{
    margin:100px auto 20px;
    overflow: hidden;
  }
  .navul li{
    background-color: #5597b4;
    padding:18px 30px;
    float:left;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
  }
  .active{
    background-color: #5597b4;
  }
  .home .home,.new .new,.contact .contact,.service .service{
    background-color: skyblue;
  }
  .checked{
       background: #eff4f7;
   }
  </style>
</head>
<body>
    <div id="nav">
        <ul>
            <li v-for="(relation,index) in relations" v-bind:id="relation.id"  v-bind:id="relation.id" v-bind:class="{checked:index==nowIndex}"  v-on:click="relationClick(index)">
                <i></i>
                <span class="">{{relation.text}}</span>
            </li>
        </ul>
    </div>

  <script src="js/vue.js" charset="utf-8"></script>
  <script type="text/javascript">
    var nav = new Vue({
      el:'#nav',
      data:{
        relations: [
          {text:'项目',id:'program'},
          {text:'人员',id:'person'},
          {text:'机构',id:'organization'},
          {text:'技术',id:'tech'},
          {text:'地区',id:'location'},
          {text:'国家',id:'country'}
        ],
        nowIndex:0
        // willShow:false
      },
      methods:{
        relationClick:function(index){
          
          this.nowIndex=index;
        }
      }
    });
  </script>
</body>
</html>

通过改变当前值切换类名

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>点击切换</title>
  <style>
    .glyphicon-minus{
      color:#08f;
    }
    .glyphicon-plus{
      color:purple;
    }

  </style>
    <script src="js/vue.js"></script>
</head>
<body>

  <div id="box">
      <div style="width:100px; height:100px; background: #6bacdf;" v-show="isDisplay"></div>

      <div class="form-group">
        <button class="btn"
                :class="[isShow?'btn-primary':'']"
                @mouseover="toggleShow()"
                @mouseout="toggleShow()"
                v-text="btnStyle"></button>

      </div>

      <div class="">
        <button class="btn"
                :class="[isTrue?'glyphicon-minus':'glyphicon-plus']"
                 @click="toggleBar()">切换类名按钮</button>

      </div>
  </div>


<script type="text/javascript">


      new Vue({
        el:'#box',
        data:{
          isDisplay:false,
          isShow: false,
          isTrue:true,
          btnStyle: 'Default'
        },
        methods:{
          toggleShow: function() {
            this.isShow = !this.isShow;
          },
          toggleBar:function(){
            this.isTrue = !this.isTrue;
          }
        },
        watch: {
          isShow: function(newVal) {
            // console.log(newVal);
            newVal ? this.btnStyle = 'Primary' : this.btnStyle = 'Default'
          }
        },
      });


  </script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^