1. 程式人生 > >vue中動態新增class類進行顯示隱藏

vue中動態新增class類進行顯示隱藏

<div class="status_button"> <el-button type="success" @click="checkSite" >查崗</el-button> <el-button type="danger">視訊</el-button> </div> <!-- 查崗部分顯示影藏 --> <
div class="check_button" :class="[this.flag?'show':'hidden']"> <ul class="cl"> <li>用xinhic</li> <li>xin231</li> </ul> </div>

通過點選按鈕進行顯示隱藏


data
() { return { flag: false, } }, methods: { getdata() { this.$axios.post('http://yapi.xxxxxxx').then( res => { console.log(res) }) }, checkSite() { this.flag = !this.flag } }

三元表示式需要寫在陣列中 點選按鈕的時候需要改變flag的狀態  這裡的flag相當於一個開關


相關推薦

vue動態新增class進行顯示隱藏

<div class="status_button"> <el-button type="success" @click="ch

vue動態新增元件

效果: 程式碼: <template>   <div>     <div v-for="(item,index) in lst">    

java如何檢視jvm動態代理class內容

在看dubbo原始碼時,發現dubbo呼叫過程設計到了很多動態代理類技術,但是這些動態代理類都是執行在記憶體中的,沒有生成clas

vue改變選中當前項的顯示隱藏或者狀態的方法

在vue中已經不像jq那樣直接操作dom了,如果要指向當前選中項時,就不能再用jq的思路來做了,方法如下: 例如 當指向一個狀態的時候,只讓指向的狀態隱藏,其他項不變,如果專案中用了element-ui,那麼操作起來會比較簡單一些,這樣設定: v-if

vue的導航欄動態新增class(三目運算子)

1.三目運算子,:class=" isActive==‘aaa’ ? ‘isActive’ : ‘’ ",@click=“toggle(‘aaa’)”。判斷isActive是否等於aaa,相等 -> class=“isActive”,不等 -> class=’’,點選的時候帶

在ListView動態新增EditText並對其中的資料進行儲存和由於複用引起的Editext的內容顯示異常的解決方案

public class AddAdapter extends BaseAdapter { private Context context; //需要增加的條目用一個Map儲存 private Map edItem; //記錄增加的條目數,作為下標給deItem賦值,可以不要

vue 動態新增class

第一步: <div class="noticePage" :class="{fixTitle:whether}"> </div> fixTitle是當達到某種條件時動態新增的class名,whether是判斷是否 第二步: 在data裡面 data(

Vue的坑】vue專案動態繫結src不顯示圖片解決方法

  v-for繫結src的資料如下: data() { return { img_src:"../../assets/images/mirror-service.png" } }   渲染之後,發現圖片不顯示,上網查詢之後發現是應為

vue 動態綁定class 和 style的方法

tail use thead node tps == sdn span tails 先列舉一些例子 :class="[‘content‘,{‘radioModel‘:checkType}]" :class="[‘siteAppListDirNode‘,{open:

vue.js 實現點選後動態新增 class 並刪除同級 class

<div id = "prizeReport"><div class="swiper-container">     <div class="swiper-wrapper

Python動態新增的成員

具體就是setattr, __setattr__, __dict__等的用法,具體可以看python的手冊了,舉剛剛寫的一小段程式碼為例。 class Foo:   pass def test(self):   print "hello" def test1():   print "hello1" cla

vue動態循環model

clas eve get del head dex text utf for vue動態循環model與angular有所不同,angular直接定義一個數組,然後傳入循環列表的index即可。 而vue不僅需要定義一個數組,還需要通過接口讀出循環的數組長度,然後在crea

vue.set動態新增對象屬性,觸發dom渲染

bject tro 數據 his col def style this lec 當我們給一個props或者data中被觀測的對象添加一個新的屬性的時候,不能直接添加,必須使用Vue.set方法 /** * ==== 選擇產品 ==== * 因為vue實

vue解決時間在ios上顯示NAN的問題

利用 log mat 工具 不支持 code tran 時間 輸出 最近在用vue,遇到倒計時在ios上顯示為NAN的問題。 因為做的是倒計時支付,思路是獲取服務器時間和下單時間,再轉成秒級時間戳做差值。 在網上找到說是ios 不支持例如2018-09-01 10:00:5

Vue動態繫結img的src屬性

問題:不同的status值,載入不同的圖片,如下程式碼雖然動態綁定了src,但是並不能成功載入圖片 <div> <img :src="imgUrl"/> <p>{{info}}</p> </div> computed:

Vue新增、刪除和搜尋

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style>

vue頁面動態新增元素

1.動態插入元件 2.頁面直接新增元素 頁面結構程式碼: <ul> <li v-for="(item, index) in itemArr" :key="index">

vue動態載入元件+開發者模式+JS引數值傳遞和引用傳遞

今天寫vue裡面通過介面反參動態載入元件時候 跟著同學。。。學習到了 一、先說說vue 內建元件 component 的用法 component元件可以來專門用來進行元件的切換,使用is來繫結你的元件名,本次系統寫的比較簡單。。。 此處::is='元件名'可以直接條用元件。 因為全頁面有十個元件載入,所

Vue如何新增全域性store

1.在命令列中輸入安裝 npm install --save vuex 2.然後在main.js檔案中引用store和在new Vue中宣告store import store from './store' store, 3.在src中建立一個page檔案,在page檔案下建立一個modul

為DOM元素動態新增class,解決addclass()的覆蓋問題

當我們需要對dom元素動態新增一個新的樣式時,通常會使用jquery的addclass()來完成 $('div').addClass('color') 但是這個方法有一個很大的弊端,他會覆蓋原來的class,所以使用addclass()只能保證新的樣式加上去,原來得就沒有了; 其次