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 load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
js调试工具Console命令详解
Oct 21 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
jQuery中extend函数详解
Feb 13 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
JavaScript嵌入百度地图API的最详细方法
Apr 16 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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的一些小问题
2010/07/03 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
PHP代码优化的53个细节
2014/03/03 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
jquery使用经验小结
2015/05/20 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
使用Python写一个小游戏
2018/04/02 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
python接入支付宝的实例操作
2020/07/20 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
满月酒主持词
2014/03/27 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
小班评语大全
2014/05/04 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
员工家属慰问信
2015/03/24 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书