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 对象模型 执行模型
Oct 15 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
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/03/17 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
python和shell获取文本内容的方法
2018/06/05 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
Python @property及getter setter原理详解
2020/03/31 Python
python开发前景如何
2020/06/11 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
舞蹈教育学专业推荐信
2013/11/27 职场文书
学生自我鉴定
2013/12/18 职场文书
中专生职业生涯规划书范文
2013/12/29 职场文书
酒店中秋节促销方案
2014/01/30 职场文书
学前教育专业求职信
2014/09/02 职场文书
同事欢送会致辞
2015/07/31 职场文书
学生会工作感言
2015/08/07 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript