<!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. bzoj 5206

    $n$ 点 $m$ 边图的有限制三元环个数 首先将所有左右端点并且属性相同的边的权值相加,合并为一条边 在这只之前得先排序排序之前得先判断是否需要交换左右端点的位置 T_T 然后统计三元环 补充说明按 ...

  2. Python的模块，模块的使用、安装，别名，模块作用域

    模块和包 所谓的模块就是将不同功能的函数分别放到不同的文件中,这样不仅有利于函数的维护,也方便了函数的调用.在Python中,一个.py文件就是一个模块(Module). 在模块的上层有一个叫做包(P ...

  3. SONiC项目的发展及其相关介绍（转载）

    SONiC作为一个开源项目,理论上是包含了SAI(switch abstraction interface,交换机抽象接口),SAI是没有开源的,厂商自己完成统一的API,提供给上层sonic用户来调 ...

  4. DEA使用git提交代码时，点了commit之后卡死在performing code analysis部分，或者performing code analysis结束后没有进入下一步操作。

    把"Perform code analysis" 和 "Check TODO" 复选框前面的勾去掉就好了. 这个可能是因为所分析的目标文件太大了,造成一直分析不 ...

  5. Windows10下安装Ubuntu18.04LTS详细教程

    这篇文章分享自己在Windows10系统下安装VMware虚拟机,然后在VMware中安装Ubuntu 18.04 LTS的详细过程.之所以选择在虚拟机中安装Ubuntu,主要是可以不影响自己电脑的正 ...

  6. 【02NOIP提高组】均分纸牌

    #include<bits/stdc++.h> using namespace std; ; int n,sum,a[maxn]; int main() { ; cin>>n; ...

  7. Tkinter 之Place布局

    一.参数说明 参数 作用 anchor  控制组件在 place 分配的空间中的位置"n", "ne", "e", "se&quo ...

  8. 浅谈无旋treap(fhq_treap)

    一.简介 无旋Treap(fhq_treap),是一种不用旋转的treap,其代码复杂度不高,应用范围广(能代替普通treap和splay的所有功能),是一种极其强大的平衡树. 无旋Treap是一个叫 ...

  9. Apache Flink - 内存管理

    JVM: JAVA本身提供了垃圾回收机制来实现内存管理 现今的GC(如Java和.NET)使用分代收集(generation collection),依照对象存活时间的长短使用不同的垃圾收集算法,以达 ...

  10. 【spring源码分析】IOC容器初始化——查漏补缺（五）

    前言:我们知道在Spring中经常使用配置文件的形式对进行属性的赋值,那配置文件的值是怎么赋值到属性上的呢,本文将对其进行分析. 首先了解一个类:PropertySourcesPlaceholderC ...