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 相关文章推荐
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
vue实现循环切换动画
Oct 17 Javascript
vue-cropper组件实现图片切割上传
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
MySQL中create table语句的基本语法是
2007/01/15 PHP
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
javascript history对象详解
2017/02/09 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
python读取Android permission文件
2013/11/01 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Python实现简单http服务器
2018/04/12 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
python 自定义对象的打印方法
2019/01/12 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
Python的条件锁与事件共享详解
2019/09/12 Python
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
几道Web/Ajax的面试题
2016/11/05 面试题
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
公司开业庆典主持词
2014/03/21 职场文书
中秋手机店促销方案
2014/06/16 职场文书
私人委托书格式
2014/09/10 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
城南旧事观后感
2015/06/11 职场文书
离职信范文
2015/06/23 职场文书