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关闭本窗口不弹出询问框的方法
Sep 12 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
vue动画效果实现方法示例
Mar 18 Javascript
js实现拖动缓动效果
Jan 13 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
微信小程序实现页面左右滑动
Nov 16 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 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
长波有什么东西
2021/03/01 无线电
一个简单的PHP验证码实现代码
2014/05/10 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
php微信开发之图片回复功能
2018/06/14 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
Python类的动态修改的实例方法
2017/03/24 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Python实现代码统计工具
2019/09/19 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
少儿节目主持串词
2014/04/02 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书