Vue 获取数组键名的方法

json 数组结构如下

"head": [{
"brand": "../static/images/brand.svg"
}],
"main": [{
"教程": []
},

想要获取 “教程” 这两个字作为标题，.vue中方法如下

<h1>
{{Object.keys(sMain)[0]}}
<h1>

其中的sMain是父级传下来的数组

import source from './assets/data/source.json'
export default {
data () {
return {
sHead: source.head[0],
sMain: source.main[0]
}
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue数组对象排序的实现代码

    前言 最近在看vue的教学视频,正好学到的数组对象排序方法,在这跟大家分享一下,如有不足之处,请赐教. 普通数组的排序 先看代码: <div class="app"> <h1>v-for实例</h1> <hr> <ol> <li v-for="number in numbers">{{number}}</li> </ol> </div> <script&

  • Vue不能观察到数组length的变化

    由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 因为vue的响应式是通过 Object.defineProperty 来实现的,但是数组的length属性是不能添加getter和setter,所有无法通过观察length来判断. 为什么Vue不能观察到数组length的变化 如下代码,虽然看

  • 浅析vue.js数组的变异方法

    Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 都有什么功能?动手试验了一下: <body> <div id="app"> <div> push方法: <input type="text" v-model="text" @keyup.enter="me

  • Vue监听数组变化源码解析

    上一篇的代码中,忽略了对数组的处理,只关心了需要关心的部分,假装数组不存在. 这一篇开始考虑数组的问题. 从最简单的入手 先考虑一个问题,如何监听数组中的对象变化?忽略掉数组本身及其中的一般值,只考虑对象数组中的对象. 遍历数组,而后对数组中的每个对象调用 observe 方法 // 上一篇中出现的未曾重写的代码,这一篇中不再重复 var Observer = function Observer(value) { this.value = value; this.dep = new Dep();

  • vue源码学习之Object.defineProperty 对数组监听

    上一篇中,我们介绍了一下defineProperty 对对象的监听,这一篇我们看下defineProperty 对数组的监听 数组的变化 先让我们了解下Object.defineProperty()对数组变化的跟踪情况: var a={}; bValue=1; Object.defineProperty(a,"b",{ set:function(value){ bValue=value; console.log("setted"); }, get:function(

  • vue检测对象和数组的变化分析

    在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态.可以直接在子组件修改对象或数组,但是并不会数据改变就会引起变化. 检测对象变化 1.不能检测到对象属性的添加或删除 var vm = new Vue({ data:{ data111:{ a = 1 } } }) data111.a = 2;//这个可以引起变化 但data111.b = 2:和vm.b = 2这个不能检测到变化 需要用 Vue.set(o

  • 浅谈Vue响应式(数组变异方法)

    浅谈Vue响应式(数组变异方法)

    前言 很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用对方法.虽然在官方文档中已经给出了方法,但是在下实在好奇的紧,想要解锁更多姿势的话,那就必须先要深入女神的心,于是乎才有了去探索Vue响应式原理的想法.(如果你愿意一层一层地剥开我的心.你会发现,你会讶异-- 沉迷于鬼哭狼嚎 无法自拔QAQ). 前排提示,Vue的响应式原理主要是使用了ES5的

  • vue.js移动数组位置,同时更新视图的方法

    使用vue.js v-for绑定若干个选项,需要对选项进行排序上下移动操作. 需要对options里面数组的位置进行交换,通常是这样来写: 假设向前移动一个: var index = this.options.indexOf(option); //获取当前选项对象在数组里面的索引. var tempOption = this.options[index-1]; //存储前一个 this.options[index-1] = option;(this.options[index]) this.op

  • Vue 获取数组键名的方法

    json 数组结构如下 "head": [{ "brand": "../static/images/brand.svg" }], "main": [{ "教程": [] }, 想要获取 "教程" 这两个字作为标题,.vue中方法如下 <h1> {{Object.keys(sMain)[0]}} <h1> 其中的sMain是父级传下来的数组 import sourc

  • php修改数组键名的方法示例

    本文实例讲述了php修改数组键名的方法.分享给大家供大家参考,具体如下: $ar = array( array(1 => 'a', 2 => 50, 3 => 60, 4 => 'long', 5 => 'zzz', 6 => 'kkk', 7 => 'ooo'), array(1 => 'b', 2 => 60, 3 => 70, 4 => 'king', 5 => 'lll', 6 => 'ttt', 7 => 'pp

  • php数组函数序列之array_keys() - 获取数组键名

    array_keys() 定义和用法 array_keys() 函数返回包含数组中所有键名的一个新数组. 如果提供了第二个参数,则只返回键值为该值的键名. 如果 strict 参数指定为 true,则 PHP 会使用全等比较 (===) 来严格检查键值的数据类型. 语法 array_keys(array,value) 参数 描述 array 必需.规定输入的数组. value 可选.指定值的索引(键). strict 可选.与 value 参数一起使用.可能的值: true - 根据类型返回带有

  • PHP实现通过二维数组键值获取一维键名操作示例

    本文实例讲述了PHP实现通过二维数组键值获取一维键名操作.分享给大家供大家参考,具体如下: 有如下既定数组: $inviteType = [ '扫码' => [ 'type' => 0, 'point' => 5, ], '评论' => [ 'type' => 1, 'point' => 5, ], '分享' => [ 'type' => 2, 'point' => 10, ], '邀请' => [ 'type' => 3, 'point'

  • Django REST Framework序列化外键获取外键的值方法

    需求:序列化外键,获取外键的除id之外的值 使用Django REST Framework虽然开发接口快速,但是如果想要获取到除外键id值之外的外键信息,直接继承serializers.ModelSerializer类,然后在fields中指定返回的字段是获取不到外键的其他值的,比如我现在需要外键的name属性值,下面就给大家介绍两种方法通过序列化外键来获取我们想要的外键的值. 这里有两个Model:问卷(Questionnaire):问题(Question).一张问卷中包含多个问题,问题通过外

  • java获取文件扩展名的方法小结【正则与字符串截取】

    本文实例讲述了java获取文件扩展名的方法.分享给大家供大家参考,具体如下: 问题描述:  有一个String类型:String imageName = "zy.jpg"; 请问我如何截取"."后面的后辍名. 解决方法一:使用正则表达式 package csdnTest; import java.util.regex.*; public class CSDNTest { public static void main(String[] ss) { String s=

  • python获取文件扩展名的方法

    本文实例讲述了python获取文件扩展名的方法.分享给大家供大家参考.具体实现方法如下: import os.path def file_extension(path): return os.path.splitext(path)[1] print file_extension('C:\py\wxPython.gif') 输出结果为: .gif 希望本文所述对大家的Python程序设计有所帮助.

  • php简单获取文件扩展名的方法

    本文实例讲述了php简单获取文件扩展名的方法.分享给大家供大家参考.具体实现方法如下: <?php function get_file_extension($file_name) { /* may contain multiple dots */ $string_parts = explode('.', $file_name); $extension = $string_parts[count($string_parts) - 1]; $extension = strtolower($exten

  • PHP获取数组表示的路径方法分析【数组转字符串】 原创

    本文实例讲述了PHP获取数组表示的路径方法.分享给大家供大家参考,具体如下: 问题: 文件解析过程中发现一段路径用数组的形式存储,现需要将完整路径以字符串形式输出 解决方法: $hostspath=array('Windows','System32','drivers','etc','hosts'); $pathstr=''; foreach($hostspath as $k=>$v){ $pathstr.=$v.'/'; } $pathstr=substr($pathstr,0,-1); ec

  • PHP获取文件扩展名的方法实例总结

    本文实例总结了PHP获取文件扩展名的方法.分享给大家供大家参考,具体如下: 在PHP面试中或者考试中会有很大几率碰到写出五种获取文件扩展名的方法,下面是我自己总结的一些方法 $file = '需要进行获取扩展名的文件.php'; //第一种,根据.拆分,获取最后一个元素的值 function getExt1{ return end(explode(".",$file);) } //第二种,获取最后一个点的位置,截取 function getExt2{ return substr($fi

随机推荐