對vuejs的v-for遍歷、v-bind動態(tài)改變值、v-if進行判斷的實例講解

更新時間：2018年08月27日 14:39:17 作者：qijingpei

今天小編就為大家分享一篇對vuejs的v-for遍歷、v-bind動態(tài)改變值、v-if進行判斷的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

最近學(xué)了點vuejs,把學(xué)的東西記錄下來方便你我他。

vuejs的官方文檔：https://vuejs.org/v2/api/ （還是要習(xí)慣看官方文檔啊同志們~）

1、 v-for進行遍歷

比如我這里想遍歷videos里的所有元素，那么我輸入

<div v-for="v in videos">

<a :href="v" rel="external nofollow" >啦啦啦</a>

</div>

注意href前面要加冒號“：”，表示這是在進行一次遍歷

下面是我運行過的一個復(fù)雜一點的代碼：

2、v-bind動態(tài)改變值

我有一堆視頻的鏈接，想讓鼠標移上去的時候顯示視頻的名字，那么我用title屬性，但是我想讓title屬性動態(tài)變化，

那么就需要v-bing了

<a href="#" rel="external nofollow" v-bind:title="video">啦啦啦</a>

v-bind:可以用來動態(tài)改變鏈接的titile的值，這樣鼠標放上去之后會顯示title中的變量

3、v-if ////v-else進行判斷

比如我這里判斷abcd是否為空：

<div v-if="abcd">

 you can see me

</div>

以上這篇對vuejs的v-for遍歷、v-bind動態(tài)改變值、v-if進行判斷的實例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue取消Axios發(fā)出的請求
axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。首先需要知道：axios不是一種新的技術(shù)。axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，本質(zhì)上也是對原生XHR的封裝，只不過它是Promise的實現(xiàn)版本，符合最新的ES規(guī)范
2022-09-09
基于Vue 和 iView分片上傳功能實現(xiàn)(上傳組件)
本文介紹了基于Vue和iView的文件分片上傳技術(shù),通過將文件拆分成多個小塊并逐塊上傳,解決了大文件上傳時的諸多問題,如上傳速度慢、超時和網(wǎng)絡(luò)中斷等,它還展示了如何實現(xiàn)分片上傳的進度顯示、錯誤處理和斷點續(xù)傳等功能,感興趣的朋友跟隨小編一起看看吧
2025-01-01
Vue 中使用 CSS Modules優(yōu)雅方法
這篇文章主要介紹了Vue 中使用 CSS Modules優(yōu)雅方法,本文文字結(jié)合實例代碼的形式給大家介紹的非常詳細，需要的朋友可以參考下
2018-04-04
Vue3中refs使用方法舉例
在Vue中Refs是對DOM元素或已安裝到DOM的其他組件實例的引用,下面這篇文章主要給大家介紹了關(guān)于Vue3中refs使用的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
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)資料,文章通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2022-03-03
淺談Vue頁面級緩存解決方案feb-alive (下)
這篇文章主要介紹了淺談Vue頁面級緩存解決方案feb-alive(下),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue-axios同時請求多個接口等所有接口全部加載完成再處理操作
這篇文章主要介紹了vue-axios同時請求多個接口等所有接口全部加載完成再處理操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue封裝通過API調(diào)用的組件的方法詳解
在日常業(yè)務(wù)開發(fā)中我們會經(jīng)常封裝一些業(yè)務(wù)組件,下面這篇文章主要給大家介紹了關(guān)于Vue封裝通過API調(diào)用的組件的方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-12-12
Vue項目中npm?install卡住問題解決的詳細指南
這篇文章主要介紹了Vue項目中npm?install卡住問題解決的相關(guān)資料,文中包括更換npm鏡像源、清除npm緩存、刪除.npmrc文件和升級Node.js版本,需要的朋友可以參考下
2024-12-12