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 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
js tab效果的实现代码
Dec 26 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 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 网页过期时间的控制代码
2009/06/29 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
详谈PHP编码转换问题
2015/07/28 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
layui table 参数设置方法
2018/08/14 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
js实现简单扫雷
2020/11/27 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
利用python修改json文件的value方法
2018/12/31 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
python3 logging日志封装实例
2020/04/08 Python
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
小学三年级数学教学反思
2014/01/31 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
《假如》教学反思
2014/04/17 职场文书
网站推广策划方案
2014/06/04 职场文书
长城导游词400字
2015/01/30 职场文书
社区植树节活动总结
2015/02/06 职场文书
Python使用scapy模块发包收包
2021/05/07 Python