<!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. grafana+mysql忘记admin密码解决方法

    通过mysql修改admin的密码. 我之前注册了一个用户,所以我直接复制lvusyy这个用户的密码即可. update user inner join (select password,salt,r ...

  2. LBA逻辑块地址

    LBA简介 磁盘读取发展 IO操作读取硬盘的三种方式: chs方式 :小于8G (8064MB) LBA28方式:小于137GB LBA48方式:小于144,000,000 GB LBA方式访问使用了 ...

  3. 关闭linux下的主板响声（主板蜂鸣器）

    在从deepin的kdd桌面换到xfce桌面后,命令行和界面操作上动不动会让主机响一声. manjaro的xfce版也是如此,不知道是不是linux下xfce的通病. 主要是搜索的时候百度的结果很奇葩 ...

  4. maven 聚合工程 > 坑总结

    maven聚合工程子项目无法构建:父工程未 install tomcat可以运行,maven 无法编译报错,检查是否添加红色语句: <dependency> <groupId> ...

  5. Hibernate用到HQL查询时的错误

    Exception in thread "main" org.hibernate.hql.internal.ast.QuerySyntaxException: student is ...

  6. excel中在某一列上的所有单元格的前后增加

    excel中在某一列上的所有单元格的前后增加数字汉字字符等东西的函数这样写 “东西”&哪一列&“东西” 例如  “1111”&E1&“3333”

  7. 通过adb操作安卓亮屏、设置背光亮度、解锁、打开app

    亮屏 adb shell inputkeyevent 26 keyevent 26表示点击power Android adb 点亮和关闭屏幕的命令 # kernel休眠 echo mem > / ...

  8. SpringBoot中的异常处理方式

    SpringBoot中有五种处理异常的方式: 一.自定义错误页面 SpringBoot默认的处理异常机制:SpringBoot默认的已经提供了一套处理异常的机制.一旦程序出现了异常SpringBoot ...

  9. Cookie的使用（js-cookie插件）

    js-cookie 官方文档 里面就详细的介绍了es5怎么引用,以下是ES6以上的用户 一.安装 npm install js-cookie --save 二.引用 import Cookies fr ...

  10. 使用Docker快速搭建Tensorflow开发环境

    当我刚开始学习使用scikit-learn时,总是会出现各种各样的包依赖问题,兜兜转转了一遍才全部安装好,现在的机器学习算法开发者大都使用tensorflow.pytorch来实现自己的想法,但依然会 ...