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 相关文章推荐
javascript 实用的文字链提示框效果
Jun 30 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 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
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
JQuery toggle使用分析
2009/11/16 Javascript
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
Python写的服务监控程序实例
2015/01/31 Python
python图像处理之镜像实现方法
2015/05/30 Python
Pycharm安装python库的方法
2020/11/24 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
自我鉴定写作要点
2014/01/17 职场文书
捐款倡议书范文
2014/02/02 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
企业文化宣传标语
2014/06/09 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
后备干部推荐材料
2014/12/24 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
python 远程执行命令的详细代码
2022/02/15 Python
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js