快捷導(dǎo)航

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

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

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

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

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

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

還可以縮寫(xiě)成

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

v-for的使用

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

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

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

<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方法沒(méi)有傳參，但是method里面定一個(gè)方法有一個(gè)參數(shù)e，那么這個(gè)參數(shù)e就為點(diǎn)擊事件中的內(nèi)容

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

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

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

<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可以簡(jiǎn)寫(xiě)為@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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)漂亮的彈窗效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)漂亮的彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
Javascript的表單驗(yàn)證-初識(shí)正則表達(dá)式
JavaScript 可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。接下來(lái)通過(guò)本文給大家介紹Javascript的表單驗(yàn)證-初識(shí)正則表達(dá)式，對(duì)js表單驗(yàn)證正則表達(dá)式相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-03-03
前端取消接口調(diào)用的方法示例
這篇文章主要介紹了前端取消接口調(diào)用的相關(guān)資料,講解了XMLHttpRequest和AbortController兩種取消HTTP請(qǐng)求的方法,XMLHttpRequest通過(guò)abort()方法取消請(qǐng)求,而AbortController提供了一個(gè)更現(xiàn)代和靈活的解決方案,需要的朋友可以參考下
2025-03-03
codeMirror插件使用講解
codeMirror是一款十分強(qiáng)大的代碼編輯插件，提供了十分豐富的API，最近在項(xiàng)目中用到了這款插件，于是在這里給大家分享下使用方法和心得。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
認(rèn)識(shí)延遲時(shí)間為0的setTimeout
由 John Resig 的 How JavaScript Timers Work 可以知道，現(xiàn)有的 JavaScript 引擎是單線程處理任務(wù)的。它把任務(wù)放到隊(duì)列中，不會(huì)同步去執(zhí)行，必須在完成一個(gè)任務(wù)后才開(kāi)始另外一個(gè)任務(wù)。
2008-05-05
Bootstrap.css與layDate日期選擇樣式起沖突的解決辦法
這篇文章主要為大家詳細(xì)介紹了BootStrap.css與layDate日期選擇樣式起沖突的解決辦法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
js實(shí)現(xiàn)限定范圍拖拽的示例
這篇文章主要介紹了js實(shí)現(xiàn)限定范圍拖拽的示例，幫助大家更好的制作js特效，美化自己的網(wǎng)頁(yè)，感興趣的朋友可以了解下
2020-10-10
js 窗口抖動(dòng)示例
想必大家對(duì)窗口抖動(dòng)一詞并不陌生吧，其實(shí)原理很簡(jiǎn)單，下面為大家簡(jiǎn)單介紹下js中時(shí)如何實(shí)現(xiàn)的，喜歡的朋友可以參考下
2013-09-09
dateformat.js超輕量級(jí)的JS日期處理庫(kù)的使用
dateformat.js 是一個(gè)非常簡(jiǎn)潔、輕量級(jí)、不到 5kb 的很簡(jiǎn)潔的 Javascript 庫(kù),本文主要介紹了dateformat.js超輕量級(jí)的JS日期處理庫(kù)的使用,感興趣的可以了解一下
2023-12-12
JavaScript如何攔截全局Fetch的請(qǐng)求與響應(yīng)詳解
全局的fetch()方法用于發(fā)起獲取資源的請(qǐng)求,它返回一個(gè)promise,這個(gè)promise會(huì)在請(qǐng)求響應(yīng)后被resolve,并傳回Response對(duì)象,這篇文章主要給大家介紹了關(guān)于JavaScript如何攔截全局Fetch的請(qǐng)求與響應(yīng)的相關(guān)資料,需要的朋友可以參考下
2024-04-04