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 相关文章推荐
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
Python中Class类用法实例分析
2015/11/12 Python
学习python类方法与对象方法
2016/03/15 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
护理专业毕业生推荐信
2013/10/31 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
小学教师管理制度
2014/01/18 职场文书
亮化工程实施方案
2014/03/17 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript