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 EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
js正则相关知识点专题
May 10 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
vue 中几种传值方法(3种)
Nov 12 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 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的网址
2006/11/25 PHP
Discuz! Passport 通行证整合
2008/03/27 PHP
php whois查询API制作方法
2011/06/23 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
python实现红包裂变算法
2016/02/16 Python
python查看微信好友是否删除自己
2016/12/19 Python
python Tkinter版学生管理系统
2019/02/20 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
Python numpy数组转置与轴变换
2019/11/15 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
机械制造与自动化应届生求职信
2013/11/16 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript