使用v-for 以及 v-bind 当我们点击某一行,某一行变颜色,其他不变

M DownTime

已于 2022-12-24 20:42:50 修改

阅读量688

点赞数 1

文章标签： vue.js javascript 前端

于 2022-12-24 20:41:03 首次发布

本文链接：https://blog.csdn.net/qq_43346784/article/details/128431142

版权

方法一：

思想：采用IsActive记录值，初始值是-1，所以全黑。但是在点击之后index的值传回函数中，修改IsActive的值后，在进行判断，IsActive==index。所以会变红

方法二：

思想：采用了v-bind:class{}进行了判断，调用is数组中的值。因为数组不是响应式，所以就需要调用Vue.set方法

方法一：

思想：采用IsActive记录值，初始值是-1，所以全黑。但是在点击之后index的值传回函数中，修改IsActive的值后，在进行判断，IsActive==index。所以会变红

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <ul>
          <li v-for="(m,index) in movies"  :class="{active:isActive==index}" @click="getClasses(index)">{{index+1}}--{{m}}</li>
  </ul>
</div>

<script>
  const app = new Vue({
    el: "#app",
    data: {
      movies: ["海王", "海贼王", "算法", "张正昊"],
      active: "active",
      isActive: -1,
    },
    methods: {
      getClasses: function (index) {
        this.isActive = index
      },
    }
  })
</script>
</body>
</html>

方法二：

思想：采用了v-bind:class{}进行了判断，调用is数组中的值。因为数组不是响应式，所以就需要调用Vue.set方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="(m,index) in movies" :class="is[index]?'active':''" @click="isIs(index)" :key="index">
        {{is[index]}}
        {{index+1}}--{{m}}</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        movies: ["海王", "海贼王", "算法", "张正昊"],
        active: "active",
        is: [false, false, false, false]
      },
      methods: {
        isIs(index) {
          Vue.set(this.is, index, !this.is[index])
        }
      },
    })
  </script>
</body>

</html>