vue中的循環(huán)對象屬性和屬性值用法
更新時間：2020年09月04日 08:56:24 作者：貓頭唔食魚
這篇文章主要介紹了vue中的循環(huán)對象屬性和屬性值用法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
v-for除了可以循環(huán)數(shù)組，還可以循環(huán)對象。
例子：
<template>
<div>
<div v-for="(item,i) in obj">{{i}}--{{item}}</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data () {
return {
obj:{
age:1,
name:"zs",
sex:"男"
}
};
}
}
</script>
<style lang="css" scoped>
</style>
結(jié)果：
補(bǔ)充知識：Vue控制路由滾動行為
跳轉(zhuǎn)路由時，要求跳轉(zhuǎn)到指定路由的某個地方，可以使用scrollBehavior方法控制。
用法：
scrollBehavior(to,from,savedPosition){ }
scrollBehavior方法可以返回x,y 坐標(biāo)點，也可以返回指定的選擇器
例子：
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../../view/Home.vue'
import Test from '../../view/Test.vue'
import News from '../../view/News.vue'
Vue.use(Router)
export default new Router({
routes: [
{
name:"Home",
component:Home,
path:"/"
},
{
name:"Test",
component:Test,
path:"/test"
},
{
name:"News",
component:News,
path:"/news"
},
{
path:"*",
redirect:"/"
}
],
mode:"history",
//跳轉(zhuǎn)到指定路由的指定坐標(biāo)
scrollBehavior(to,from,savedBehavior){
if(to.path==="/test"){
return {
x:0,
y:100
}
};
// 跳轉(zhuǎn)到指定的選擇器
if(to.path==="/news"){
return {
selector:".here"
}
}
}
})
以上這篇vue中的循環(huán)對象屬性和屬性值用法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
父子組件通信是Vue中常見的場景,這篇文章主要為大家詳細(xì)介紹了vue中父子組件相互傳值的實現(xiàn)方法,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下2023-12-12
基于vue2框架的機(jī)器人自動回復(fù)mini-project實例代碼
本篇文章主要介紹了基于vue2框架的機(jī)器人自動回復(fù)mini-project實例代碼，具有一定的參考價值，有興趣的可以了解一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了Vue監(jiān)視數(shù)據(jù)的原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue使用css-rcurlyexpected等less報錯問題
這篇文章主要介紹了vue使用css-rcurlyexpected等less報錯問題，具有很的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue中$attrs與$listeners的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
本文主要介紹了vue usePop彈窗控制器的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要為大家介紹了vue3封裝自定義v-model的hooks示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue 列表頁跳轉(zhuǎn)詳情頁獲取id以及詳情頁通過id獲取數(shù)據(jù)
這篇文章主要介紹了vue 列表頁跳轉(zhuǎn)詳情頁獲取id以及詳情頁通過id獲取數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
使用element-ui設(shè)置table組件寬度(width)為百分比
這篇文章主要介紹了使用element-ui設(shè)置table組件寬度(width)為百分比方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Antd form表單的使用、設(shè)值、取值、清空值方式
這篇文章主要介紹了Antd form表單的使用、設(shè)值、取值、清空值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04