<!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. QT中使用pri子工程

    QT中使用pri子工程 使用子工程的作用是使得工程结构更加清晰,举个例子: 我制作了一个自定义控件,具备通用性,我打算把它用在日后的工程中.制作的这个控件需要用到头文件h.源文件c,资源文件qrc.图 ...

  2. fdisk分区命令

    fdisk是Linux系统中最常用的分区工具,通过这个命令也可以查看系统中所有可用的分区,但是这个命令只支持MBR的分区表(这句话应该只对某些系统,CentOS7-1810适用,Debian9.5和o ...

  3. 数据库学习之七--视图（View）

    一.定义 视图:指计算机数据库中的一个临时虚拟表,其内容由查询定义:同真实的表一样,视图包含一系列带有名称的列和行数据.但是,视图并不在数据库中以存储的数据值集形式存在. 二.优点 1. 优点: a. ...

  4. 块状链表 bzoj 3343教主的魔法

    //块状链表//分块排序,然后每次查找时在暴力查找头和尾两个块.//中间那些块,因为有序所以只需2分查找即可.我用的是lower_pound();//插入是,也是头和尾暴力插入,中间那些加到一个累计里 ...

  5. Shadows 使用说明

    1:下载最新版 Windows地址:点击下载 Mac地址:点击下载 2:Windows安装插件(点击下方插件名即可下载) .NET Framework 4.7.2和 Microsoft Visual ...

  6. 【原创】go语言学习（九）指针类型

    目录 变量和内存地址 指针类型 值拷贝和引用拷贝 变量和内存地址 1.每个变量都有内存地址,可以说通过变量来操作对应大小的内存 var a int32 a = 100 fmt.Printf(“%d\n ...

  7. jsp 页面 javax.servlet.jsp.JspException cannot be resolved to a type 异常

    <dependencies><dependency><groupId>javax.servlet</groupId><artifactId> ...

  8. P1021 邮票面值设计——搜索+完全背包

    P1021 邮票面值设计 题目意思是你最多用n张邮票,你可以自己设定k种邮票的面值,每种邮票数量无穷,你最多能用这k种邮票在不超过n张的情况下,组合成的价值要求是从1开始连续的, 求最大能连续到多少: ...

  9. java 根据年月获取当前年月的最后一天，获取当前年月有多少天

    new Date( "2019-08-" + 1)   获取2019年8月的最后一天   结果为--2019-08-31 new Date(2019, 8, 0).getDate( ...

  10. nmon服务器性能结果报告分析

    一.nmon命令 ./nmon_x86_64_centos7 -f -s 10 -c 60 -m ./log/  命令的含义是: -f :按标准格式输出文件名称:<hostname>_YY ...