vue.js指令v-for使用以及下標(biāo)索引的獲取
更新時(shí)間：2019年01月31日 10:53:38 作者：LDH-
今天小編就為大家分享一篇關(guān)于vue.js指令v-for使用以及下標(biāo)索引的獲取，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
在 v-for 代碼塊中，我們可以完全地訪(fǎng)問(wèn)父級(jí)作用域下的屬性。
v-for 還支持可選的第二個(gè)參數(shù)，作為當(dāng)前項(xiàng)的索引。
也可以使用 v-for 來(lái)遍歷對(duì)象的屬性。
還可以提供第二個(gè)參數(shù)，作為對(duì)象的鍵名(key)：
<body>
<div id="box">
<ul>
<li @click="onclick(index)" v-for="(item,index) in dataList">{{item.name}}</li>
</ul>
</div>
</body>
<script src="assets/vue/vue.js"></script>
<script>
new Vue({
el:"#box",
data:{
dataList:[
{name:"子鼠"},
{name:"丑牛"},
{name:"寅虎"},
{name:"卯兔"},
{name:"辰龍"}
]
},
methods:{
onclick:function(index){
alert(index);
}
}
})
</script>
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接
相關(guān)文章
Vue使用electron轉(zhuǎn)換項(xiàng)目成桌面應(yīng)用方法介紹
Electron也可以快速地將你的網(wǎng)站打包成一個(gè)原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
vue父子組件傳值不能實(shí)時(shí)更新的解決方法
Vue是一個(gè)以數(shù)據(jù)驅(qū)動(dòng)、組件化的前端框架,其中組件化是Vue中較為重要的概念之一,組件之間的通信則成為Vue中較為普遍的需求,下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值不能實(shí)時(shí)更新的解決方法,需要的朋友可以參考下2023-05-05
在了解vue的常用的實(shí)例方法之前，我們應(yīng)該先要了解其常用的實(shí)例屬性，你能了解到的vue實(shí)例屬性有哪些呢？小編在這里就列舉了幾個(gè)常用的vue實(shí)例的屬性。大家可以一起參考學(xué)習(xí)一下2022-08-08
解決vue 給window添加和移除resize事件遇到的坑
這篇文章主要介紹了解決vue 給window添加和移除resize事件遇到的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
一款移動(dòng)優(yōu)先的Solid.js路由solid router stack使用詳解
這篇文章主要為大家介紹了一款移動(dòng)優(yōu)先的Solid.js路由solid router stack使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章介紹了Vue中的生命周期，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
插槽slot可以說(shuō)在一個(gè)Vue項(xiàng)目里面處處都有它的身影，比如我們使用一些UI組件庫(kù)的時(shí)候，我們通常可以使用插槽來(lái)自定義我們的內(nèi)容，這篇文章主要介紹了Vue3中slot插槽使用方式,需要的朋友可以參考下2023-01-01
Vue2的異步更新機(jī)制是基于JavaScript的事件循環(huán)機(jī)制實(shí)現(xiàn)的。nextTick方法則是在DOM更新后執(zhí)行回調(diào)函數(shù)。本文詳細(xì)介紹了Vue2的異步更新機(jī)制和nextTick原理，對(duì)于理解Vue2的渲染機(jī)制和優(yōu)化性能有很大的幫助。2023-04-04
v-distpicker地區(qū)選擇器組件使用實(shí)例詳解
代碼添加了一個(gè)vDistpickerHandle的事件處理函數(shù)對(duì)地區(qū)選擇器中的數(shù)據(jù)進(jìn)行處理,將數(shù)據(jù)存儲(chǔ)到form對(duì)象的相應(yīng)屬性中,方便數(shù)據(jù)提交,這篇文章主要介紹了v-distpicker地區(qū)選擇器組件使用,需要的朋友可以參考下2024-02-02
VUE 動(dòng)態(tài)組件的應(yīng)用案例分析
這篇文章主要介紹了VUE 動(dòng)態(tài)組件的應(yīng)用,結(jié)合具體案例形式分析了vue.js動(dòng)態(tài)組件的應(yīng)用場(chǎng)景、解決方案及相關(guān)操作技巧,需要的朋友可以參考下2019-12-12