【Vue学习】1.利用vue,点击列表中的哪一项, 那么该项的文字变成蓝色

最新推荐文章于 2024-05-30 11:27:58 发布

ArtemisKhryso

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量742

点赞数 1

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/ArtemisKhryso/article/details/109161691

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一开始改变li的class时时直接利用数组名[index]进行修改，然后一点反应都没有，后来才知道这种利用下标修改数组元素的方式Vue是不能响应式更新的，后来改成了函数方法就成了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      color: aqua;
    }
  </style>
</head>
<body>

<div id="app">
  <ul>
    <li v-for="(m, index) in movies" >
    <!-- 1.使用v-bind对象语法，因为控制的class属性只有一个，可以直接赋值-->
      <h2 :class="{active:isRed[index]}" @click="taggleIsRed(index)">{{index}}.{{m}}</h2>
      <!-- 多个class可以使用数组语法，让代码更简洁-->
      <!-- <h2 :class="getClasses(index)" @click="taggleIsRed(index)">-->{{index}}.{{m}}</h2>
    </li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data:{
      movies: ['星际穿越', '钢铁侠', '复仇者联盟', '神奇女侠'],
      isRed: [true,true,true,true]
    },
    methods: {
      taggleIsRed(index){
        // 1.方法一
        // const rev = !this.isRed[index]
        // this.isRed.splice(index,1,rev)
        // 2.方法二，省掉一个变量空间
        Vue.set(this.isRed,index,!this.isRed[index])
      },
      getClasses(index){
        return {active: this.isRed[index]}
      }
    }
  })
</script>

</body>
</html>

在这里插入图片描述

ArtemisKhryso

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue学习】1.利用vue,点击列表中的哪一项, 那么该项的文字变成蓝色

一开始改变li的class时时直接利用数组名[index]进行修改，然后一点反应都没有，后来才知道这种利用下标修改数组元素的方式Vue是不能响应式更新的，后来改成了函数方法就成了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .active { color
复制链接

扫一扫