<!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. 题解 CF1063B 【Labyrinth】

    题解 CF1063B [Labyrinth] 完了我发现我做CF的题大部分思路都和别人不一样qwq 这道题其实很水,不至于到紫题 我们只要bfs一下,向四个方向剪下枝,就A了(好像还跑的蛮快?) 是一 ...

  2. P2637 第一次，第二次，成交！

    题目描述 因为奶牛们的节食运动(奶牛还节食?)给农夫JOHN余下了一大批干草无法处理,所以他准备要开一个拍卖会去出售他的干草.他有N(1<=N<=1000)批干草(每批大约100捆).他的 ...

  3. IP数据报首部checksum的计算

    IP数据报首部checksum的计算 2009年02月22日 23:23:00 zhangyang0402 阅读数:10897   一.首先区别下面两个概念:(1)one's complement:正 ...

  4. 二分算法题目训练(三)——Anton and Making Potions详解

    codeforces734C——Anton and Making Potions详解 Anton and Making Potions 题目描述(google翻译) 安东正在玩一个非常有趣的电脑游戏, ...

  5. Python -三目运算（三元运算）

    if 1==1: name = "jacky" else: name = "zhuyuanlu" name = 值1 if 条件 else 值2 #如果这个条件 ...

  6. 使用dig进行DNS查询

    dig全称Domain Information Groper,是一个DNS域名信息查询的工具,可以使用来查看域名解析的过程. dig是linux下自带的工具,如果要在windows下使用需要自行下载和 ...

  7. Python里面如何实现tuple和list的转换？

    #list to tuple lis=[,,,,,] x=tuple(lis) print(type(x),x) #tuple to list tup=(,,,,,) y=list(tup) prin ...

  8. codeforces#1248D2. The World Is Just a Programming Task（括号匹配转化为折线处理）

    题目链接: http://codeforces.com/contest/1248/problem/D2 题意: 可以执行一次字符交换的操作 使得操作后的字符串,循环移位并且成功匹配的方案最多 输出最多 ...

  9. Linux网络编程四、UDP，广播和组播

    一.UDP UDP:是一个支持无连接的传输协议,全称是用户数据包协议(User Datagram Protocol).UDP协议无需像TCP一样要建立连接后才能发送封装的IP数据报,也是因此UDP相较 ...

  10. Linux 如何通过某一台服务器调用执行多台远程服务器上的脚本，结果显示在本地？

    现在都流行自动化运维了,可能目前技术不够,很多自动化工具还不怎么会用,所以本次只是通过ssh来实现功能. 说明:自己写的一个简单脚本,只是实现了基础功能,还有待优化. 一共三台机器: master:1 ...