点击隔行变色

最新推荐文章于 2024-06-30 11:06:07 发布

张顺15889363722

最新推荐文章于 2024-06-30 11:06:07 发布

阅读量227

点赞数

文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/Z15889363722/article/details/108275456

版权

css代码

<style>
      .select1 {
        background: #ccc;
      }
      .select2 {
        background: pink;
      }
    </style>

html代码

 <div v-for="i in 10" @click="change(i)" :class="flag==i?bg:''">{{i}}</div>
      <!-- 点击事件把当前点击的div的下标保存下来，如果这个div是当前点击的就给一个类名select，如果不是当前点击的类名就为空 -->

      <!-- 只要data里的数据发生变化 页面就会重新渲染 -->
    </div>

js代码

<script src="lib/vue-2.4.0.js"></script>
    <script>
      var vm = new Vue({
        el: "#box",
        data: {
          flag: 0,
          bg: "select1",
        },
        methods: {
          change(i) {
            this.flag = i;
            if (i % 2 == 0) {
              this.bg = "select1";
            } else {
              this.bg = "select2";
            }
          },
        },
      });
    </script>