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 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
Exjs 入门篇
Apr 07 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
js实现右键自定义菜单
Dec 03 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
js实现秒表计时器
Dec 16 Javascript
快速解决element的autofocus失效问题
Sep 08 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正则
2006/07/07 PHP
php获取网页内容方法总结
2008/12/04 PHP
PHP 变量类型的强制转换
2009/10/23 PHP
PHP对象实例化单例方法
2017/01/19 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
javascript 获取网页参数系统
2008/07/19 Javascript
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
jquery 手势密码插件
2017/03/17 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
Python 如何展开嵌套的序列
2020/08/01 Python
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
2014年机关植树节活动方案
2014/02/27 职场文书
安全承诺书范文
2014/03/26 职场文书
志愿者活动总结报告
2014/06/27 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
人事主管岗位职责
2015/02/04 职场文书
大学生团员个人总结
2015/02/14 职场文书
四年级作文之说明文作文
2019/10/14 职场文书