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中的parseInt使用技巧
Sep 03 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
详解JavaScript作用域 闭包
Jul 29 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
原生js实现九宫格拖拽换位
Jan 26 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实现的农历算法实例
2015/08/11 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
JS重学系列之聊聊new操作符
2019/03/04 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
用python实现对比两张图片的不同
2018/02/05 Python
浅析Python四种数据类型
2018/09/26 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
英文版餐饮运营管理求职信
2013/11/06 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
大学总结自我鉴定
2014/01/18 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
分层教学实施方案
2014/03/19 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
股指期货心得体会
2014/09/13 职场文书
2014年市场部工作总结
2014/11/25 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书