索引的获取

first和last是布尔类型的

奇数偶数


[]方括号表示的是数据绑定
()圆括号就是事件绑定
、

开始代码

我们要实现的功能是菜单点击后，就变色

这样我们就得到了索引。

新建一个class的样式

什么时候用这个样式呢？当i等于(这个里双等于)选中的这个索引。

定义索引的变量。默认是等于-1表示啥都没选中。

li标签点击事件触发改变索引的变量


放到函数里面

后端定义函数

点击当前按钮变红色

first


这个可以起任意的变量名


first的样式为绿色

第一个变绿色

even和



偶数变色

trackBy

得到数组当中唯一表达元素的某个值，用这个值进行渲染和排序。
trackBy后面可以是个函数也可以是个表达式，
当做函数用，直接返回一个表达式

加个判断。数组的数量少的情况下 看不到有什么提升。数据量的时候 可以看到性能的提升。

结束

2-5 【ngFor指令 事件的处理和样式绑定】顶部导航支持选中状态的更多相关文章

  1. 第一章、VUE-挂载点-实例成员-数据-过滤器-文本指令-事件指令-属性指令-表单指令-01

    目录 路飞项目 vue vue 导读 vue 的优势 渐进式框架 引入 vue 实例成员 - 挂载点 el js 对象(字典)补充 实例成员 - 数据 data 实例成员 - 过滤器 filters ...

  2. VUE-挂载点-实例成员-数据-过滤器-文本指令-事件指令-属性指令-表单指令-01

    目录 路飞项目 vue vue 导读 vue 的优势 渐进式框架 引入 vue 实例成员 - 挂载点 el js 对象(字典)补充 实例成员 - 数据 data 实例成员 - 过滤器 filters ...

  3. 巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式&&onblur和onfocus事件&&window.onload解释&&小米商城讲解

    1.回顾上节内容(JavaScript) 一.JavaScript概述 1.ECMAScript和JavaScript的关系 2.ECMAScript的历史 3.JavaScript是一门前后端都可以 ...

  4. Vue样式绑定和事件处理器

    一.样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. v-bind 在处理 class 和 style 时, 专门增强了它 ...

  5. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

  6. wpf样式绑定 行为绑定 事件关联 路由事件实例

    代码说明:我要实现一个这样的功能  有三个window窗口  每个窗体有一个label标签  当我修改三个label标签中任意一个字体颜色的时候  其他的label标签字体颜色也变化 首先三个窗体不用 ...

  7. React入门---事件与数据的双向绑定-9

    上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...

  8. jquery绑定事件的坑，重复绑定问题

    我实现点击table表格中的删除按钮,找到当前按钮的祖先元素tr 然后删除该行,但是我首先点击删除的时候要先弹出提示框,是否要下载,这时在点击删除按钮删除,之前没有考虑到事件重复绑定问题,所以每次点击 ...

  9. CheckStateChanged（复选框选中状态更改事件）和 CheckedChanged(单选按钮选中状态更改事件)二者区别？

    CheckStateChanged(复选框选中状态更改事件)和 CheckedChanged(单选按钮选中状态更改事件)二者区别: 复选框控件(CheckBox)提供了CheckedChanged控件 ...

随机推荐

  1. static 关键字在java语言中的特性

    ​ 一,将自己注入到一个静态变量中实现静态类,如下写法 以上方法的目的是要实现一个静态类,方便用类名获取对象实例,一般情况下调用普通方法需要对象实例.这对象要么new出来,要么spring的注入如下是 ...

  2. Java实现行列式计算

    前天我看线代书,看到行列式,发现是个递归的式子,恰巧又正在学java,产生写程序实现的想法.写了两个小时,觉得实现了,写了个行列式放进去测试,我放的是 这个行列式,经过程序计算后发现结果是0.我以为我 ...

  3. hak的使用

    autohotkey简称ahk 它是一款轻量级的脚本语言文件,它可以干任何事情,如做dnf的连发脚本,类似按键精灵的自动化点击,按键自动打开文件一系列事情,文件需要按照ahk自己的语言,实现自定义的脚 ...

  4. Json在序列化getter导致的问题

    Java中的Json序列化,不容忽视的getter 问题重现 public class AjaxJson { private boolean success; private String msg; ...

  5. ReactiveX 学习笔记（30）操作符辨析

    RxJava: merge/concat/switch RxJS: merge/concat/switch/exhaust RxSwift: merge/concat/switchLatest mer ...

  6. junit4的初级用法

    junit4初级用法: 一:各个标签的意思 1.@Test用来标注测试函数 2.@Before用来标注此函数在每次测试函数运行之前运行(每执行一个@Test之前都要运行一遍@Before) 3.@Af ...

  7. Kali Linux 2019.4 vmtool安装

    1.如图点击 2.桌面上光盘把vmtool拿出来 然后解压加权限并执行 3.一路回车即可 如下图安装成功 然后reboot重启即可

  8. 洛谷 P3469 [POI2008]BLO-Blockade 题解

    一道经典的割点例题,用size数组记录该子树有多少个节点,sum是这棵搜索树上有多少个节点,sum*(n-sum-1)是将点删掉后的数对数量. #include<iostream> #in ...

  9. (尚021)Vue_eslint编码规范检查

    1.eslint 1.1说明 1)ESLint是一个代码规范检查工具 2)它定义了很多特定的规则,一旦你的代码违背了某一规则,eslint会做出非常有用的提示 3)官网:http://eslint.o ...

  10. 微信小程序弹窗

    wxml <view class="content"> <button bindtap="popSuccessTest">成功提示弹窗& ...