Vue——点击列表更改字体颜色——2020.11.14

最新推荐文章于 2023-09-13 16:19:31 发布

Blockchain_KT

最新推荐文章于 2023-09-13 16:19:31 发布

阅读量3.3k

点赞数 2

分类专栏： Vue.js-实战开发文章标签： vue web js css html

本文链接：https://blog.csdn.net/weixin_43402353/article/details/109693460

版权

Vue.js-实战开发专栏收录该内容

64 篇文章 46 订阅

订阅专栏

一丶案例需求

问题：点击列表中的哪一项，那么该项的文字就变成红色
说明：Vue中v-for,v-bind（：）,v-on（@）的综合使用

二丶案例代码

<!--作者：key-->
<!--案例需求：点击列表中的哪一项，那么该项的文字就变成红色-->
<!--开发工具：WebStorm-->
<!--开发时间：2020/11/14 16:18-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color:red;
    }
  </style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <ul>
    <!--        1.== 用于比较、判断两者相等，比较时可自动换数据类型-->
    <!--        2.=== 用于（严格）比较、判断两者（严格）相等，不会进行自动转换，要求进行比较的操作数必须类型一致，不一致时返回flase。-->
    <li v-for="(item,index) in movies"
        v-on:click="liClick(index)"
        v-bind:class="{active: activeIndex===index}">
      {{item}}
    </li>
  </ul>
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
      movies:["陈二狗的妖孽人生","余罪","老九门","黄金瞳","盗墓笔记","棋魂"],
      activeIndex:-1
    },
    methods:{
      liClick:function (index){
        this.activeIndex = index;
      }
    }
  })
</script>
</body>
</html>