vue中的循环对象属性和属性值用法


Posted in Javascript onSeptember 04, 2020

v-for除了可以循环数组,还可以循环对象。

例子:

<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>

结果:

vue中的循环对象属性和属性值用法

补充知识:Vue控制路由滚动行为

跳转路由时,要求跳转到指定路由的某个地方,可以使用scrollBehavior方法控制。

用法:

scrollBehavior(to,from,savedPosition){ }

scrollBehavior方法可以返回x,y 坐标点,也可以返回指定的选择器

例子:

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",
 //跳转到指定路由的指定坐标
 scrollBehavior(to,from,savedBehavior){
   if(to.path==="/test"){
    return {
     x:0,
     y:100
    }
   };
   // 跳转到指定的选择器
   if(to.path==="/news"){
   return {
    selector:".here"
   }
   }
 }
})

以上这篇vue中的循环对象属性和属性值用法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
video.js使用改变ui过程
Mar 05 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
JavaScript中import用法总结
Jan 20 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 Javascript
JavaScript逻辑运算符相关总结
Sep 04 #Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 #Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 #Javascript
JS变量提升及函数提升实例解析
Sep 03 #Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 #Javascript
Vue js with语句原理及用法解析
Sep 03 #Javascript
Vue通过provide inject实现组件通信
Sep 03 #Javascript
You might like
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
javascript常用方法总结
2015/05/14 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
Python处理JSON数据并生成条形图
2016/08/05 Python
python实现自主查询实时天气
2018/06/22 Python
Django视图扩展类知识点详解
2019/10/25 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
python调用win32接口进行截图的示例
2020/11/11 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
大学学年自我鉴定
2013/10/28 职场文书
矿泉水广告词
2014/03/20 职场文书
公司年会主持词
2014/03/22 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
小学生家长寄语
2014/04/02 职场文书
家长通知书家长评语
2014/04/17 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
产品推广策划方案
2014/05/10 职场文书
婚前协议书范本两则
2014/10/16 职场文书
答谢词范文
2015/01/05 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js