uni-app基本的數(shù)據綁定v-bind,v-for,v-on:click詳解
更新時間：2024年08月01日 15:48:29 作者：遛馬
這篇文章主要介紹了uni-app基本的數(shù)據綁定v-bind,v-for,v-on:click,本文通過示例代碼給大家介紹的非常詳細,需要的朋友可以參考下
v-bind動態(tài)綁定屬性
1.在data中定義了一個屬性img，是圖片路徑，把這個圖片路徑綁定到image中用于展示，利用v-bind進行渲染
<image v-bind:src="img"></image>
還可以縮寫成
<image :src="img"></image>
v-for的使用
data中定義一個數(shù)組，最終將數(shù)組渲染到頁面上，利用v-for進行循環(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添加點擊事件，可以使用v-on:click
<button v-on:click="click()"></button>
methods: {
click(e){
console.log(e)
}
}如果button中的click方法沒有傳參，但是method里面定一個方法有一個參數(shù)e，那么這個參數(shù)e就為點擊事件中的內容
<button v-on:click="click(20)"></button>
methods: {
click(e){
console.log(e)
}
}如果button中的方法click傳遞了參數(shù)，而且methods里面定一的方法也就只有一個參數(shù)e，那么這個e就是值20，如果傳遞了一個參數(shù)，還想獲取點擊事件，可以這樣寫
<button v-on:click="click(20,$event)"></button>
methods: {
click(num,e){
console.log(e)
}
}使用$event獲取點擊事件，這樣methods方法里面的參數(shù)num就是20，e就是點擊事件內容
v-on:click可以簡寫為@click,如下
<button @click="click(20,$event)"></button>
到此這篇關于uni-app基本的數(shù)據綁定v-bind,v-for,v-on:click的文章就介紹到這了,更多相關uni-app數(shù)據綁定內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)漂亮的彈窗效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
JavaScript 可用來在數(shù)據被送往服務器前對 HTML 表單中的這些輸入數(shù)據進行驗證。接下來通過本文給大家介紹Javascript的表單驗證-初識正則表達式，對js表單驗證正則表達式相關知識感興趣的朋友一起學習吧2016-03-03
這篇文章主要介紹了前端取消接口調用的相關資料,講解了XMLHttpRequest和AbortController兩種取消HTTP請求的方法,XMLHttpRequest通過abort()方法取消請求,而AbortController提供了一個更現(xiàn)代和靈活的解決方案,需要的朋友可以參考下2025-03-03
codeMirror是一款十分強大的代碼編輯插件，提供了十分豐富的API，最近在項目中用到了這款插件，于是在這里給大家分享下使用方法和心得。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
由 John Resig 的 How JavaScript Timers Work 可以知道，現(xiàn)有的 JavaScript 引擎是單線程處理任務的。它把任務放到隊列中，不會同步去執(zhí)行，必須在完成一個任務后才開始另外一個任務。2008-05-05
Bootstrap.css與layDate日期選擇樣式起沖突的解決辦法
這篇文章主要為大家詳細介紹了BootStrap.css與layDate日期選擇樣式起沖突的解決辦法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了js實現(xiàn)限定范圍拖拽的示例，幫助大家更好的制作js特效，美化自己的網頁，感興趣的朋友可以了解下2020-10-10
想必大家對窗口抖動一詞并不陌生吧，其實原理很簡單，下面為大家簡單介紹下js中時如何實現(xiàn)的，喜歡的朋友可以參考下2013-09-09
dateformat.js 是一個非常簡潔、輕量級、不到 5kb 的很簡潔的 Javascript 庫,本文主要介紹了dateformat.js超輕量級的JS日期處理庫的使用,感興趣的可以了解一下2023-12-12
全局的fetch()方法用于發(fā)起獲取資源的請求,它返回一個promise,這個promise會在請求響應后被resolve,并傳回Response對象,這篇文章主要給大家介紹了關于JavaScript如何攔截全局Fetch的請求與響應的相關資料,需要的朋友可以參考下2024-04-04