1. 程式人生 > >Vuejs在v-for中,利用index來對第一項新增class

Vuejs在v-for中,利用index來對第一項新增class

  1. <aclass="list-group-item":class="{'active':!index}"v-for="(i,index) in announcement">

index來源於v-for,i表示遍歷的陣列的元素,index表示索引。

由於index從0開始,因此如果要指定第一項有active這個類,那麼就用v-bind:class="{'active':!index}"

第一項原本是false(0),第二項和之後是true(>0),通過邏輯非操作符,讓其值反轉。

因此,第一項有active這個類,而後面的沒有。

如果除了第一項之外有某個類,也可以通過不加邏輯非操作符來達到。

類似的,可以用index==2這樣的表示式來讓第三項獲得這個類。

注意,我的版本是Vuejs2.0,因此貌似不能用$index來替換。

相關推薦

Vuejs在v-for利用index第一新增class

<aclass="list-group-item":class="{'active':!index}"v-for="(i,index) in announcement"> index來源於v-for,i表示遍歷的陣列的元素,index表示索引。 由於index從0開始,因此如果要

Vuejs(14)——在v-for利用index第一新增class

<aclass="list-group-item":class="{'active':!index}"v-for="(i,index) in announcement"> index來源於v-for,i表示遍歷的陣列的元素,index表示索引。 由於index從0開始,因此如果要

Vuejs在v-for,利用index第一新增class的方法

1.為li列表首項新增選中樣式: <li v-for="(items,index) in currentImgList" class="imgLiClass" :class="{'active': !index}"></li> 或者 <li v-for="(

面向用super聯系父類的函數

col super 面向 elf 結果 執行 mon other 對象 class Animal: def __init__(self): print("A構造方法") self.ty = "動物" def Other(se

OutSystems 利用聚合結果進行排序

大多數情況下,記錄會按照某些順序列在螢幕上,以便於閱讀或幫助更快地查詢資訊。 在 OutSystems 中,聚合允許對返回的記錄進行排序,排序可以是固定的或動態的。 對結果進行固定排序: 在聚合中,開啟要排序的屬性選單; 選擇A-Z作為升序或Z-A作為降序;

Linux利用logrotatelog檔案進行轉儲

使用logrotate對日誌檔案轉儲,按時或者按大小。 logrotate簡介 NAME logrotate - rotates, compresses, and mails system logs SYNOPSIS

SpringMVC利用@InitBinder頁面資料進行解析繫結

在使用SpingMVC框架的專案中,經常會遇到頁面某些資料型別是Date、Integer、Double等的資料要繫結到控制器的實體,或者控制器需要接受這些資料,如果這類資料型別不做處理的話將無法繫結。       解決方法:使用註解@InitBinder來解決這些問題,這樣

Strust2加入監聽器判斷用戶是否在session存在。

監聽器 admin net 它的 dispatch abstract action || lac Strust2中,加入監聽器來判斷用戶是否在session中存在。 struts2攔截器流程: web.xml中,struts2設置攔截*.action ,當用戶訪問某一個a

C# 發送http方法利用鍵值 KeyValuePair發送分頁命令日歷的開始和結束時間命令(POST)

!= 方法 call value face all 發送 keyvalue analysis 一個HTTP的類裏面: public static string HttpClientPost(string url, string taskIdx, string

Java開發通過sql實現過濾以及分頁

  我們通過一個需求來引入問題。 首先,簡單介紹一下需求:實現一個下圖的頁面,包含了過濾以及分頁。資料是後臺資料庫獲得到的。 那麼關於如何實現過濾以及分頁,考慮到通過前臺實現或者後臺實現,我們不妨來分析一下兩種方法。 首先,前臺實現:無非就是後臺獲取所有的list,傳

.net寫的webservice使用soapheader保證安全性

首先,需要從SoapHeader派生一個類,全部程式碼如下:using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Servic

ABAP利用函式WS_DELIVERY_UPDATE進行VL02N發貨過賬時獲取憑證號(mblnr)

某專案中,做wms介面時,根據wms傳過來的引數,利用函式WS_DELIVERY_UPDATE進行發貨過賬(vl02n發貨過賬),而函式本身是不返回憑證號的,但客戶需求要在介面中返回過賬成功的憑證號,可以下幾種方式獲取到憑證號: 方法一:這種方法是最原始的方法,判斷函式執行

abap利用write進行表單列印示例

*&---------------------------------------------------------------------* *& Report  Z_PRINT_LEND                                                *

在springnvc/springboot 利用jason 的Map引數實現多個引數傳遞

在在springnvc/springboot中,我們知道如用HTTP POST方法來寫REST 呼叫,則@RequestBody是不允許有多個的,比如下面的宣告是無效的。 @RequestMapping(value = "/updateInsert", method =

AngularJS 通過 radio控制元素的顯示和隱藏以及控制表單元素的 disabled

程式碼如下 <lable> <input type="radio" ng-value="true" name="radio-test" ng-model="radioVal

C++程式設計利用WINDOWS API獲得系統狀態資訊[CPU佔用率硬碟使用情況記憶體使用情況]

#include <Ice/Ice.h> #include <iostream> #include <GetWinSysState.h> #include <Winbase.h> #include <conio.h>

在ASP.NET MVC使用Bundle打包壓縮js和css

在ASP.NET MVC4中(在WebForm中應該也有),有一個叫做Bundle的東西,它用來將js和css進行壓縮(多個檔案可以打包成一個檔案),並且可以區分除錯和非除錯,在除錯時不進行壓縮,以原始方式顯示出來,以方便查詢問題。 這裡僅簡單記錄下如何使用。 首先

visual studio利用巨集判斷當前是debug還是release

#ifndef  _DEBUG #pragma  comment ( linker , "/subsystem:/"windows/" /entry:/"mainCRTStartup/""  )#end

JSarguments用存函式的實參

 <!DOCTYPE html>  <html>  <head>  <meta charset="UTF-8">  <title>實踐題 - 選項卡</title>  <script type="

NodeJS研究筆記利用目錄實現跨平臺檔案鎖

檔案加鎖是多執行緒或多程序開發時,確保檔案資源不被併發讀寫所汙染的有效措施,NodeJS提供了一些辦法確保在競爭性環境下,檔案資料的一致性。 NodeJS保證檔案讀取一致性的辦法有兩種,一是讀取檔案時設定隔離標誌,隔離標誌是指,當使用fs模組開啟檔案時,在開啟