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 相关文章推荐
Dom在ajax技术中的作用说明
Oct 25 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
layui表格数据重载
Jul 27 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
Javascript地址引用代码实例解析
Feb 25 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代码
2007/03/03 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
常用PHP框架功能对照表
2014/10/23 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
JS使用for in有序获取对象数据
2020/05/19 Javascript
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
python 统计代码行数简单实例
2017/05/04 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
毕业生就业推荐信范文
2013/12/01 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
工程资料员岗位职责
2015/04/13 职场文书
论文评审意见
2015/06/05 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
2019思想汇报范文
2019/05/21 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python