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