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 相关文章推荐
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
JS array数组检测方式解析
May 19 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 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
python中元类用法实例
2014/10/10 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
Python global全局变量函数详解
2018/09/18 Python
Python gevent协程切换实现详解
2020/09/14 Python
Python colormap库的安装和使用详情
2020/10/06 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
经理职责范文
2013/11/08 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
经销商年会策划方案
2014/05/29 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
在Django中使用MQTT的方法
2021/05/10 Python
mybatis 获取更新记录的id
2022/05/20 Java/Android