快捷導(dǎo)航

uni-app基本的數(shù)據(jù)綁定v-bind,v-for,v-on:click詳解

更新時間：2024年08月01日 15:48:29 作者：遛馬

這篇文章主要介紹了uni-app基本的數(shù)據(jù)綁定v-bind,v-for,v-on:click,本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

v-bind動態(tài)綁定屬性

1.在data中定義了一個屬性img，是圖片路徑，把這個圖片路徑綁定到image中用于展示，利用v-bind進(jìn)行渲染

<image v-bind:src="img"></image>

還可以縮寫成

<image  :src="img"></image>

v-for的使用

data中定義一個數(shù)組，最終將數(shù)組渲染到頁面上，利用v-for進(jìn)行循環(huán)

<view v-for="(item,index) in arr"  :key="index"></view>

添加key的綁定是為了適配小程序，如果不需要index，可以直接寫成

<view v-for="item in arr"  :key="item.id"></view>

如果給button添加點(diǎn)擊事件，可以使用v-on:click

<button v-on:click="click()"></button>

methods: {
            click(e){
				console.log(e)
			}
		}

如果button中的click方法沒有傳參，但是method里面定一個方法有一個參數(shù)e，那么這個參數(shù)e就為點(diǎn)擊事件中的內(nèi)容

<button v-on:click="click(20)"></button>

methods: {
            click(e){
				console.log(e)
			}
		}

如果button中的方法click傳遞了參數(shù)，而且methods里面定一的方法也就只有一個參數(shù)e，那么這個e就是值20，如果傳遞了一個參數(shù)，還想獲取點(diǎn)擊事件，可以這樣寫

<button v-on:click="click(20,$event)"></button>

methods: {
            click(num,e){
				console.log(e)
			}
		}

使用$event獲取點(diǎn)擊事件，這樣methods方法里面的參數(shù)num就是20，e就是點(diǎn)擊事件內(nèi)容

v-on:click可以簡寫為@click,如下

<button @click="click(20,$event)"></button>

到此這篇關(guān)于uni-app基本的數(shù)據(jù)綁定v-bind,v-for,v-on:click的文章就介紹到這了,更多相關(guān)uni-app數(shù)據(jù)綁定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

基于Bootstrap分頁的實(shí)例講解(必看篇)
下面小編就為大家?guī)硪黄贐ootstrap分頁的實(shí)例講解(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
Js實(shí)現(xiàn)無刷新刪除內(nèi)容
本文給大家分享的是一段仿騰訊微博的無刷新刪除特效的代碼，非常的實(shí)用，有需要的小伙伴可以參考下。
2015-04-04
輕松理解Javascript變量的相關(guān)問題
這篇文章主要給大家介紹了關(guān)于Javascript變量的相關(guān)問題，文中給出了詳細(xì)的介紹和示例代碼，相信對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值，有需要的朋友們下面來一起看看吧。
2017-01-01
JS上傳組件FileUpload自定義模板的使用方法
這篇文章主要為大家詳細(xì)介紹了JS上傳組件FileUpload自定義模板的使用方法，感興趣的小伙伴們可以參考一下
2016-05-05
JS上傳圖片前實(shí)現(xiàn)圖片預(yù)覽效果的方法
這篇文章主要介紹了JS上傳圖片前實(shí)現(xiàn)圖片預(yù)覽效果的方法,涉及javascript操作圖片的技巧,需要的朋友可以參考下
2015-03-03
JS動態(tài)插入并立即執(zhí)行回調(diào)函數(shù)的方法
這篇文章主要介紹了JS動態(tài)插入并立即執(zhí)行回調(diào)函數(shù)的方法,實(shí)例分析了動態(tài)插入js文件及執(zhí)行回調(diào)函數(shù)的相關(guān)技巧,需要的朋友可以參考下
2016-04-04
JavaScript?中的時間戳操作和使用詳解
時間戳在編程中有著非常廣泛的應(yīng)用,比如記錄事件發(fā)生的時間、計(jì)算時間差、生成唯一的標(biāo)識符等,時間戳的使用非常重要,今天我們將一起來探討如何在?JavaScript?中獲取和操作時間戳,感興趣的朋友一起看看吧
2025-06-06
Array.filter中如何正確使用Async
這篇文章主要介紹了Array.filter中如何正確使用Async,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-11-11
JavaScript實(shí)現(xiàn)移動端帶transition動畫的輪播效果
這篇文章主要介紹了JavaScript原生實(shí)現(xiàn)帶transition動畫的自動+手動輪播效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-03-03
JS寫的數(shù)字拼圖小游戲代碼[學(xué)習(xí)參考]
昨天沒事做，就用JS寫了個數(shù)字拼圖的小游戲，自娛自樂。可惜關(guān)于逆序數(shù)的問題還沒解決，現(xiàn)在有時是拼不成的，大家見諒了。
2008-10-10