<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js" type="text/javascript"></script>
    <style type="text/css">
        .active{
            color: red;
        }
    </style>
</head>
<body>
<!--修饰符-->
<div id="app">
    <ul>
        <li v-for="(item ,index) in items" :class="{active:currentIndex===index}" @click="lilick(index)">{{item}}</li>
    </ul>
</div>

<script>
   const app=new Vue({
       el:'#app',
       data:{
          message:"hello" ,
           items:[ "haha",
               'asda',
               'asdfasd',
               'asddddd'],
           currentIndex:-1
       },
       methods:{
           lilick(index){
              this.currentIndex=index;
           }
       }

   })

</script>
</body>
</html>

点击 显示红色 小案例 vue的更多相关文章

  1. react框架实现点击事件计数小案例

    下面将以一个小案例来讲解react的框架的一般应用,重点内容在代码段都有详细的解释,希望对大家有帮助 代码块: 代码块: import React from 'react'; import React ...

  2. Vue小案例 之 商品管理------学习过滤器 使用过滤器处理日期的格式

    代码学习过滤器 过滤器介绍:过滤模型数据,在数据显示前做预处理操作: 内置过滤器:在1.x中,Vue提供了内置过滤器,但是在2.x中已经完全废除: 解决办法: (1)使用第三方库来替代1.x中的内置过 ...

  3. vue小案例--简易评论区

    一.小案例(评论区) 1.流程 (1)分析静态页面.(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html)(2)拆分静态页面,变成一个个组件. ...

  4. angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例

    基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...

  5. jQuery 二级菜单，一次显示一个小类 鼠标点击显示小类

    jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="ar ...

  6. VUE小案例--跑马灯效果

    自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...

  7. Vue.js小案例、生命周期函数及axios的使用

    一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...

  8. vue实现两重列表集合，点击显示，点击隐藏的折叠效果，（默认显示集合最新一条数据，点击展开，显示集合所有数据）

    效果图: 默认显示最新一条数据: 点击显示所有数据: 代码: 说明:这里主要是 这块用来控制显示或者隐藏 根据当前点击的  这个方法里传递的index 对应  isShow 数组里的index  ,对 ...

  9. Vue小案例（一）

    案例需求: 创建一个品牌展示表格,表头有编号(id),品牌名称(name),创建时间(time)和操作,需要实现的功能是对数据的增删操作,和时间的格式化. 思路分析:在开发之前需要想清楚要用到Vue中 ...

随机推荐

  1. [Luogu] 送花

    https://www.luogu.org/problemnew/show/2073 自己yy,明显错 #include <bits/stdc++.h> using namespace s ...

  2. Codeforces 1175G Yet Another Partiton Problem [DP，李超线段树]

    Codeforces 思路 首先吐槽一句:partiton是个什么东西?我好像在百度翻译里面搜不到呀qwq 发现不了什么性质,那就直接上DP吧.注意到DP可以分层,所以设\(dp_i\)表示当前层,分 ...

  3. （转）代码审计利器-RIPS实践

    一.代码审计工具介绍 代码审计工具可以辅助我们进行白盒测试,大大提高漏洞分析和代码挖掘的效率. 在源代码的静态安全审计中,使用自动化工具辅助人工漏洞挖掘,一款好的代码审计软件,可以显著提高审计工作的效 ...

  4. 前端武器库之DOM练习

    1.模态对话框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. Codeforces Round #591 (Div. 2, based on Technocup 2020 Elimination Round 1)

    Virtual participate 的,D题不会做,打了1:30就打不动了,过了ABCE. A - CME 题意:? 题解:? void test_case() { int n; scanf(&q ...

  6. [WEB安全]phpMyadmin后台任意文件包含漏洞分析(CVE-2018-12613)

    0x00 简介 影响版本:4.8.0--4.8.1 本次实验采用版本:4.8.1 0x01 效果展示 payload: http://your-ip:8080/index.php?target=db_ ...

  7. Lucene4.2源码解析之fdt和fdx文件的读写——fdx文件存储一个个的Block，每个Block管理着一批Chunk，通过docID读取到document需要完成Segment、Block、Chunk、document四级查询，引入了LZ4算法对fdt的chunk docs进行了实时压缩/解压

    前言 通常在搜索打分完毕后,IndexSearcher会返回一个docID序列,但是仅仅有docID我们是无法看到存储在索引中的document,这时候就需要通过docID来得到完整Document信 ...

  8. UNIX网络编程 环境搭建

    配置好动态链接库或者静态链接库 1,下载UNIX网络编程书的头文件及示例源码unpv13e 2    按照readme来编译 Execute the following from the src/ d ...

  9. Cesium的Property机制总结

    前言 Cesium官方教程中有一篇叫<空间数据可视化>(Visualizing Spatial Data).该文文末简单提到了Cesium的Property机制,然后话锋一转,宣告此教程的 ...

  10. mac电脑如何快速显示桌面及切换应用

    使用mac电脑时,我们习惯打开很多应用,文档等等.如果打开应用非常多,需要操作桌面,却不知如何快速返回桌面和切换应用时,操作就非常不便了,下面简单介绍mac电脑系统如何快速显示桌面及切换应用? 工具/ ...