点击 显示红色 小案例 vue
<!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的更多相关文章
- react框架实现点击事件计数小案例
下面将以一个小案例来讲解react的框架的一般应用,重点内容在代码段都有详细的解释,希望对大家有帮助 代码块: 代码块: import React from 'react'; import React ...
- Vue小案例 之 商品管理------学习过滤器 使用过滤器处理日期的格式
代码学习过滤器 过滤器介绍:过滤模型数据,在数据显示前做预处理操作: 内置过滤器:在1.x中,Vue提供了内置过滤器,但是在2.x中已经完全废除: 解决办法: (1)使用第三方库来替代1.x中的内置过 ...
- vue小案例--简易评论区
一.小案例(评论区) 1.流程 (1)分析静态页面.(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html)(2)拆分静态页面,变成一个个组件. ...
- angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...
- jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类
jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="ar ...
- VUE小案例--跑马灯效果
自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...
- Vue.js小案例、生命周期函数及axios的使用
一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...
- vue实现两重列表集合,点击显示,点击隐藏的折叠效果,(默认显示集合最新一条数据,点击展开,显示集合所有数据)
效果图: 默认显示最新一条数据: 点击显示所有数据: 代码: 说明:这里主要是 这块用来控制显示或者隐藏 根据当前点击的 这个方法里传递的index 对应 isShow 数组里的index ,对 ...
- Vue小案例(一)
案例需求: 创建一个品牌展示表格,表头有编号(id),品牌名称(name),创建时间(time)和操作,需要实现的功能是对数据的增删操作,和时间的格式化. 思路分析:在开发之前需要想清楚要用到Vue中 ...
随机推荐
- Map集合类
1.1 Map.clear方法——从Map集合中移除所有映射关系 public static void main(String[] args) { Map map=new HashMap(); ...
- 遇到bug如何处理
issue中查询是否有相似bug assert / try-except / IDE单步调式 框架可以查询源码或者查询官方文档
- 爬虫之获取猫眼电影10W评论
第一步 打开一个电影的评论界面: 哪吒之魔童降世:https://maoyan.com/films/1211270 我们发现这里只显示10条评论,而我们需要爬取10w条数据,所以不能从此页面进行抓包, ...
- windows2008服务器设置系统启动时程序自动运行
设置windows服务器启动时自动运行程序,而且不需要用户登录,就可以启动 首先准备好,程序的启动脚本文件或运行文件,如:start.bat 通过系统计划任务实现 1.开始----管理工具-----任 ...
- 2018-2019-2 20165234 《网络对抗技术》 Exp6 信息搜集与漏洞扫描
Exp6 信息搜集与漏洞扫描 实验内容 1. 各种搜索技巧的应用 2. DNS IP注册信息的查询 3. 基本的扫描技术:主机发现.端口扫描.OS及服务版本探测.具体服务的查点(以自己主机为目标) 4 ...
- win10系统vs2008环境wince项目无法创建问题
文章备份,原文来自百度某个作者的博客. 昨晚,当我升级win10之后,发现系统使用还是挺顺畅的,没有当初升级win8的时候那么多错误. 但是今晚回来之后,发现之前win8.1下已经安装好的vs2008 ...
- python 设计模式之迭代器模式
#写在前面 真的有一大把年纪了,回头看看, 明明也很努力,却发现自己穷的一无所有,昨夜的事更是让我眼泪止不住的流,眼睛也肿了,委屈的愣是说不出一个字.前面荆棘丛生,身后已无退路,生活一地鸡毛,糟糕的一 ...
- 解决com.android.support版本冲突问题
原文:https://www.jianshu.com/p/0fe985a7e17e 项目中不同Module的support包版本冲突怎么办? 只需要将以下代码复制到每个模块的build.gradle( ...
- linux内核中的regmap是如何初始化的?
1. 内核版本 5.2.0 2. 请看devm_regmap_init_i2c (include/linux/regmap.h) /** * devm_regmap_init_i2c() - Init ...
- osg model
osg::ref_ptr<osg::Node> MyOSGLoadEarth::CreateNode() { osg::ref_ptr<osg::Group> _root = ...