vue2.x v-for下點選新增class 樣式重新整理不消失 實現類似多選的功能
下面程式碼實現的功能:
v-for遍歷下的元素,點選哪一個就給哪一個新增changeCollect下的樣式,如果已經添加了樣式,再點選就取消樣式。
點選下一個時,點選過的樣式不會消失,類似於多選
1、template程式碼
<li :class="{changeCollect:isCollect[index]}" @click="changeCollect(index)"></li>
2、script程式碼
data(){ return{ isCollect:localStorage.collect?JSON.parse(localStorage.collect):[] } }, methods:{ changeCollect:function(index){ if(this.isCollect[index]){ this.$set(this.isCollect,index,false) }else{ this.$set(this.isCollect,index,true) } localStorage.collect = JSON.stringify(this.isCollect) } }
相關推薦
vue2.x v-for下點選新增class 樣式重新整理不消失 實現類似多選的功能
下面程式碼實現的功能: v-for遍歷下的元素,點選哪一個就給哪一個新增changeCollect下的樣式,如果已經添加了樣式,再點選就取消樣式。 點選下一個時,點選過的樣式不會消失,類似於多選 1、template程式碼 <li :class="{changeColl
vue2.X v-model 指令
rip logs arr src light image brush -m this 1.v-model指令 <!DOCTYPE html> <html> <head> <title></title>
Vue2.0 v-for列表渲染 backgroundImage動態載入url
最後的程式碼: 說明: 本專案圖片放置位置:vue專案下 src/assets -HTML <router-link class='routerNav' v-for='(mainNavitem,index) in mainNavitems' v-o
小程式點選事件,新增class樣式
業務場景:點選對應的積分的時候,給加上顏色 實現方案:首先這三個積分型別是datas迴圈出來的,我們需要使用小程式的data-來自定義屬性,在點選不同型別的時候,獲取到對應的id,將這個id拿到js那邊重新附一個值isSelect,在進行判斷isSelect跟迴圈的
關於vue2.x的sync坑點
關於vue2.x的sync這個坑,可是把我坑的不要不要的,因為基礎有點薄弱,所以看了官文關於sync的介紹一臉懵,雖然官文講的也很清楚,但是對於一棵小白菜來說有點不知所云了。 好了正式介紹了: 在2.3.0+版本之後,vue又重新引進了.sync這個修飾符了,這個
element v-for 下拉框 無法進行表單驗證
關於element 下拉框在使用v-for 以後驗證失靈問題、或者是驗證失靈問題 首先確認:rules=" "總的名字js中的保持一致 prop 與rules:{}中的元素名保持一致 如果都校驗完畢發現沒有錯誤:那可能是後臺型別與前臺傳過來的:value值得型別不
bootstrap 模態框model點選模態框外部不消失模態框的效果
由於客戶使用是,填寫模態框內容時,不小心點選了外部,有需要重新填寫,因此需要限制點選外部不消失模態框,只能通過點選模態框的確定按鈕或者右上角叉號,消失模態框。 只要在定義模態框時,新增上 data-b
bootstrap模態框點選空白處模態框不消失、監聽模態框開啟還是關閉
1.在div上新增 aria-hidden="true" 屬性 aria-hidden="true" 用於保持模態視窗不可見,直到觸發器被觸發為止(比如點選在相關的按鈕上)。 data-show
如何讓AlertDialog 在點選確定或者取消時不消失
有時候我們會在AlertDialog 裡面進行一些邏輯判斷,當單擊“確定“按鈕時完成某些工作,如果這些工作失敗,對話方塊不能關閉。而當成功完成工作後,則關閉對話方塊。但是系統預設是每次點選確定按鈕或者取消按鈕,dialog都會消失。原因分析的話這篇文章分析的非
Vue v-for迴圈的時候更改 class的樣式名稱
在v-bind:class上繫結索引函式 <div v-for="(shop,index) in shoplist" style="max-width: 20rem;" v-bind:class="calculate(index)"> calculate(i
checkbox設置復選框的只讀效果不讓用戶勾選
IV name ble HR 可用 操作 直接 有時 取消 在Web開發中,有時候需要顯示一些復選框(checkbox),表明這個地方是可以進行勾選操作的,但是有時候是只想告知用戶"這個地方是可以進行勾選操作的"而不想讓用戶在此處勾選(比如在信息展示頁面),這時候就需要將復
利用My97DatePicker實現年份多選
onclick ffffff fmt color select val java amp scrip 昨天,咱們嘗試使用Kalendae實現年份的多選事件,結果發現,該插件不能實現月份以及年份的選擇,更不必說年份的多選的事件了。筆者也不願多做深究,既然My97DatePic
jQuery新增class樣式,移除同胞的class樣式
實現效果:點選模組為當前元素新增class,同時移除其他三個元素的class $('#headnav li').click(function() { &nbs
微信小程式下拉載入和上拉重新整理兩種實現方法
方法一:onPullDownRefresh和onReachBottom方法實現小程式下拉載入和上拉重新整理 首先要在json檔案裡設定window屬性 屬性
【轉】WPF自定義控制元件與樣式(8)-ComboBox與自定義多選控制元件MultComboBox
一.前言 申明:WPF自定義控制元件與樣式是一個系列文章,前後是有些關聯的,但大多是按照由簡到繁的順序逐步釋出的等。 本文主要內容: 下拉選擇控制元件ComboBox的自定義樣式及擴充套件; 自定義多選控制元件MultiComboBox; 二.下拉選擇控制元件ComboBox的自
angularjs實現混合多選(純angularjs)
需求還是同上一篇一樣。 從這個網站上得到了靈感,相當於是重新設計,然後寫了一遍程式。 網站:http://damoqiongqiu.iteye.com/blog/1917971 例項6 自己所寫的基於這個例子得以實現: 讓我想想原理,我面前所認為,核心思
vue 實現按鈕多選和反選
效果如下:點選選中,再次點選反選,我做的專案是彈框,請按實際需要去掉彈框樣式,其中@c-main代表的顏色是 #c6ae6c 程式碼如下: <template> <!--推薦人彈窗--> <div class="sourcePop">
利用Rabbit MQ 實現一對多通知功能(動態新增刪除佇列交換機)
樓主在專案中需要實現分散式lucene查詢,由於lucene的索引是存放在本地的。網上有很多方案實現起來相對比較複雜,故樓主為了簡單化針對索引同步問題採用的方案是,如果某一結點發生索引的增刪改,通過rabbitmq通知所有lucene節點也進行本地的索引的更改。
Android listview 實現列表多選
最終實現效果: 具體實現: 1. 使用listview的多選模式: 在listview的佈局中加入:android:choiceMode=”multipleChoice” <Lis
猴子吃桃問題。猴子第一天摘了若干個桃子,當即吃了一半,還不解饞,又多吃了一個;第二天,吃剩下的桃子的一半,還不過癮,又多吃了一個;以後每天都吃前一天剩下的一半多一個,到第10天想再吃時,只剩下一個桃子
int main() { int num = 1; int i = 0; int sum = 0; for (i = 0; i < 9; i++) {