给父级下面动态显示的最后一个子级添加类名;代码复制下来就能用;求解答

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

  <script src="https://www.jq22.com/jquery/vue.min.js"></script>

  <style>

    .active {

      display: none;

    }

    .bg {

      background: blue;

    }

  </style>

</head>

 

<body>

  <div id="app">

    <ul>

      <li>1</li>

      <li :class="[fiFlag ? 'active' : '' ]">2</li>

      <li>3</li>

      <li :class="[twoFlag ? 'active' : '' ]">4</li>

    </ul>

    <button @click="btn(1)">第二个</button>

    <button @click="btn(2)">第四个</button>

    <button @click="btn(3)">显示两个</button>

  </div>

</body>

<script>

  new Vue({

    el: '#app',

    data() {

      return {

        fiFlag: true,

        twoFlag: true,

      }

    },

    methods: {

      btn(val) {

        if (val == 1) {

          this.fiFlag = false;

          this.twoFlag = true;

        } else if (val == 2) {

          this.fiFlag = true;

          this.twoFlag = false;

        } else {

          this.fiFlag = true;

          this.twoFlag = true;

        }

      }

    }

  })

</script>

</html>

查看全部
helloWolfs
helloWolfs
2020/11/26 11:51
  • html5
  • vue.js
  • javascript
  • jquery
  • 点赞
  • 收藏
  • 回答
    私信

2个回复