對vuejs的v-for遍歷、v-bind動態(tài)改變值、v-if進(jìn)行判斷的實(shí)例講解
更新時間：2018年08月27日 14:39:17 作者：qijingpei
今天小編就為大家分享一篇對vuejs的v-for遍歷、v-bind動態(tài)改變值、v-if進(jìn)行判斷的實(shí)例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
最近學(xué)了點(diǎn)vuejs,把學(xué)的東西記錄下來方便你我他。
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前面要加冒號“：”，表示這是在進(jìn)行一次遍歷
下面是我運(yùn)行過的一個復(fù)雜一點(diǎn)的代碼：
2、v-bind動態(tài)改變值
我有一堆視頻的鏈接，想讓鼠標(biāo)移上去的時候顯示視頻的名字，那么我用title屬性，但是我想讓title屬性動態(tài)變化，
那么就需要v-bing了
<a href="#" rel="external nofollow" v-bind:title="video">啦啦啦</a>
v-bind:可以用來動態(tài)改變鏈接的titile的值，這樣鼠標(biāo)放上去之后會顯示title中的變量
3、v-if ////v-else進(jìn)行判斷
比如我這里判斷abcd是否為空：
<div v-if="abcd"> you can see me </div>
以上這篇對vuejs的v-for遍歷、v-bind動態(tài)改變值、v-if進(jìn)行判斷的實(shí)例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。首先需要知道：axios不是一種新的技術(shù)。axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，本質(zhì)上也是對原生XHR的封裝，只不過它是Promise的實(shí)現(xiàn)版本，符合最新的ES規(guī)范2022-09-09
基于Vue 和 iView分片上傳功能實(shí)現(xiàn)(上傳組件)
本文介紹了基于Vue和iView的文件分片上傳技術(shù),通過將文件拆分成多個小塊并逐塊上傳,解決了大文件上傳時的諸多問題,如上傳速度慢、超時和網(wǎng)絡(luò)中斷等,它還展示了如何實(shí)現(xiàn)分片上傳的進(jìn)度顯示、錯誤處理和斷點(diǎn)續(xù)傳等功能,感興趣的朋友跟隨小編一起看看吧2025-01-01
這篇文章主要介紹了Vue 中使用 CSS Modules優(yōu)雅方法,本文文字結(jié)合實(shí)例代碼的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-04-04
在Vue中Refs是對DOM元素或已安裝到DOM的其他組件實(shí)例的引用,下面這篇文章主要給大家介紹了關(guān)于Vue3中refs使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
element ui的el-input-number修改數(shù)值失效的問題及解決
這篇文章主要介紹了element ui的el-input-number修改數(shù)值失效的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue3中defineProps傳值使用ref響應(yīng)式失效詳解
這篇文章主要給大家介紹了關(guān)于vue3中defineProps傳值使用ref響應(yīng)式失效的相關(guān)資料,文章通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了淺談Vue頁面級緩存解決方案feb-alive(下),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue-axios同時請求多個接口 等所有接口全部加載完成再處理操作
這篇文章主要介紹了vue-axios同時請求多個接口 等所有接口全部加載完成再處理操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
在日常業(yè)務(wù)開發(fā)中我們會經(jīng)常封裝一些業(yè)務(wù)組件,下面這篇文章主要給大家介紹了關(guān)于Vue封裝通過API調(diào)用的組件的方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
Vue項(xiàng)目中npm?install卡住問題解決的詳細(xì)指南
這篇文章主要介紹了Vue項(xiàng)目中npm?install卡住問題解決的相關(guān)資料,文中包括更換npm鏡像源、清除npm緩存、刪除.npmrc文件和升級Node.js版本,需要的朋友可以參考下2024-12-12