vue之多条件筛选

<template>
  <div class="t">
    <div>
      <div class="txt" @click="to_show">
        <ul>
          <li class="current" id="ddd">
            <a href>北京</a>
          </li>
          <li class="a">
            <a href="javascript:;">天津</a>
          </li>
          <li>
            <a href="javascript:;">太原</a>
          </li>
          <li>
            <a href="javascript:;">太原</a>
          </li>
          <li>
            <a href="javascript:;">太原</a>
          </li>
          <li>
            <a href="javascript:;">太原</a>
          </li>
        </ul>
      </div>

      <div class="txt_1" @click="to_show">
        
        <ul>
        
          <li class="current">
            <a href="javascript:;">北京</a>
          </li>
          <li>
            <a href="javascript:;">天津</a>
          </li>
          <li>
            <a href="javascript:;">太原</a>
          </li>
          <li>
            <a href="javascript:;">太原</a>
          </li>
          <li>
            <a href="javascript:;">太原</a>
          </li>
          <li>
            <a href="javascript:;">太原</a>
          </li>
        </ul>
      </div>

    
    </div>
  </div>
</template>
<style type="text/css">
.txt {
  width: 350px;
  height: 28px;
}

.txt ul li {
  width: 34px;
  height: 22px;
  margin-left: 10px;
  list-style: none;
  float: left;
}
.txt ul li a {
  width: 30px;
  height: 10px;
  color: grey;

  text-decoration: none;
}
.current {
  background-color: #00caca;
}

.txt_1 {
  width: 350px;
  height: 50px;
}

.txt_1 ul li {
  width: 34px;
  height: 22px;
  margin-left: 10px;
  list-style: none;
  float: left;
}
.txt_1 ul li a {
  width: 30px;
  height: 10px;
  color: grey;

  text-decoration: none;
}
</style>
<script>
export default {
  data() {
    return {};
  },
  methods: {
      to_show(e){
          const cur = e.target.parentElement.parentElement.getElementsByClassName('current')
          for(var i = 0 ;i < cur.length;i++){
              cur[i].classList.remove('current')
          }
          var index = e.target.childNodes[0].nodeType
          if(index == 3){
               e.target.parentElement.classList.add('current')
          }
         
      }
  }
};
</script>

标签：vue,height,current,width,太原,li,之多,筛选,txt
来源： https://blog.csdn.net/weixin_44763595/article/details/120658176