對(duì)vuejs的v-for遍歷、v-bind動(dòng)態(tài)改變值、v-if進(jìn)行判斷的實(shí)例講解
最近學(xué)了點(diǎn)vuejs,把學(xué)的東西記錄下來(lái)方便你我他。
vuejs的官方文檔：https://vuejs.org/v2/api/ （還是要習(xí)慣看官方文檔啊同志們~）
1、 v-for進(jìn)行遍歷
比如我這里想遍歷videos里的所有元素，那么我輸入
<div v-for="v in videos"> <a :href="v" rel="external nofollow" >啦啦啦</a> </div>
注意href前面要加冒號(hào)“：”，表示這是在進(jìn)行一次遍歷
下面是我運(yùn)行過(guò)的一個(gè)復(fù)雜一點(diǎn)的代碼：
2、v-bind動(dòng)態(tài)改變值
我有一堆視頻的鏈接，想讓鼠標(biāo)移上去的時(shí)候顯示視頻的名字，那么我用title屬性，但是我想讓title屬性動(dòng)態(tài)變化，
那么就需要v-bing了
<a href="#" rel="external nofollow" v-bind:title="video">啦啦啦</a>
v-bind:可以用來(lái)動(dòng)態(tài)改變鏈接的titile的值，這樣鼠標(biāo)放上去之后會(huì)顯示title中的變量
3、v-if ////v-else進(jìn)行判斷
比如我這里判斷abcd是否為空：
<div v-if="abcd"> you can see me </div>
以上這篇對(duì)vuejs的v-for遍歷、v-bind動(dòng)態(tài)改變值、v-if進(jìn)行判斷的實(shí)例講解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全選和反選功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
微前端qiankun主應(yīng)用與子應(yīng)用之間的跳轉(zhuǎn)示例
這篇文章主要為大家介紹了微前端qiankun主應(yīng)用與子應(yīng)用之間的跳轉(zhuǎn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
詳解關(guān)于Vue2.0路由開啟keep-alive時(shí)需要注意的地方
這篇文章主要介紹了關(guān)于Vue2.0路由開啟keep-alive時(shí)需要注意的地方,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue項(xiàng)目中form?data形式傳參方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue Router中應(yīng)用中間件的方法，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)vue router,感興趣的朋友可以了解下2020-08-08
Vue + iView實(shí)現(xiàn)Excel上傳功能的完整代碼
前一段時(shí)間項(xiàng)目經(jīng)歷了前端上傳文件的過(guò)程，首先進(jìn)入頁(yè)面會(huì)展示默認(rèn)的樣子，選中要上傳的excel文件，本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友參考下吧2021-06-06
數(shù)據(jù)緩存可以提高應(yīng)用程序的性能,減少網(wǎng)絡(luò)請(qǐng)求,提高用戶體驗(yàn),在本文中,我們介紹了Vue中如何進(jìn)行數(shù)據(jù)緩存,并提供了一些示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
Ant Design Vue 添加區(qū)分中英文的長(zhǎng)度校驗(yàn)功能
這篇文章主要介紹了Ant Design Vue 添加區(qū)分中英文的長(zhǎng)度校驗(yàn)功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下功能，2020-01-01
Vue實(shí)現(xiàn)頁(yè)面添加滿屏水印和去除水印功能
在一些特殊的應(yīng)用場(chǎng)景中,可能需要在網(wǎng)頁(yè)上添加水印以保護(hù)版權(quán)或標(biāo)識(shí)信息,本文將介紹如何在Vue項(xiàng)目中添加滿屏水印并實(shí)現(xiàn)去除水印的功能,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-07-07
Vue 動(dòng)態(tài)組件components和v-once指令的實(shí)現(xiàn)
這篇文章主要介紹了Vue 動(dòng)態(tài)組件components和v-once指令的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08