关于#vue.js#的问题:关于vue框架如何获取数组中的值的问题

关于vue框架如何获取数组中的值的问题


今天是跟着黑马自学vue的第二天,在学完v-指令尝试实践一下 如何切换相片时遇到无法获取数组中的值的问题。


教学视频中获取数组中的值的方法:

src=imgArr[index] alt=" "
data:{
  imgArr:[
       "./images/00.jpg",
       "./images/01.jpg",
       "·/images/02.jpg",
       "./images/03.jpg",
       "./images/04.jpg",
       "·/images/05.jpg",
       "./images/06.jpg",
       "·/images/07.jpg",
       "·/images/08.jpg",
       "·/images/09.jpg",
       "·/images/10.jpg",
  ],
  index:0,
}

这是我获取数组中的值的方法:

img




img




尝试了好几遍图片依旧没有显示,我在想是否结构中表达无法获取数组中的值呢? 于是我尝试在js部分尝试输出数组的值:

img




img



希望各位能指点一下哪里错了

  • 你可以看下这个问题的回答https://ask.csdn.net/questions/1092327
  • 这篇博客你也可以参考下:在做VUE项目时遇到的问题及解决办法:点击不同的标题加载不同的组件,使用路由去切换组件时,第一次进入这个页面没有默认显示的子组件
  • 除此之外, 这篇博客: vue中子组件修改父组件传入的值问题中的 在讲vue之前,我们先来了解一下js中参数的传递 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 什么是按值传递呢?简单来说按值传递就是将一个变量复制给另一个变量,当复制的那个变量发生改变时,原来的变量不会发生改变,举个简单的例子。

    var a=1;
    function arr(b)
    {
    	b=2;
    	console.log(b);//2
    }
    arr(a);
    console.log(a);//1
    

    这就验证了我们刚才所说的,这里将变量a复制给了b,相当于将a拷贝了一份,b改变时a不改变

    引用传递相对于按值传递适用于更复杂的数据结构,比如数组,对象,引用传递简单来说就是所有的变量都来自同一个对象,他们都是这个对象的引用,当其中引用发生改变时,相应的对象的值也会发生,也就使得其他的引用也发生改变,举个例子:

    var a={
    	name:'张三'
    }
    function arr(b)
    {
    	b.name='李四';
    	console.log(b.name);//李四
    }
    arr(a);
    console.log(a.name);//李四
    

    讲完js后我们再来看看vue中父子组件传值修改问题,vue中父子组件常用的传值方式就是props,$emit通常来说父组件的更新会向下流到子组件,但是反过来不行,这样就能防止子组件意外改变父组件的数据,从而导致数据流向难以理解,但是有一种情况,当父组件传入的值是数组或者对象时,子组件就能改变父组件传过来的数据,而且父组件中的数据也会随着改变,这是为什么呢,其实我们上面就已经讲了,下面我们来深入理解下。
    1、js数据类型
    (1)基本数据类型:String,Number,Boolean等
    (2)引用数据类型:Object,Array,Function
    2、js存储空间分配
    js在运行中有三种内存空间,分别是代码空间,栈空间,堆空间,其中的代码空间主要是存储可执行代码的,栈空间就是调用栈,是用来存储执行上下文的,堆空间是用来储存引用数据类型的,js执行的时候,会把基本类型的数据保存在栈空间中,引用类型的数据保存在堆空间中。当定义引用数据类型的时候,数据会被保存在堆空间,栈空间只保留数据的引用,当需要访问这些数据是,通过栈中的引用来进行访问,所以当父组件传递对象或者数组时,传递的其实是一个引用地址

<img v-for="(item,index) in imgArr" :key="index" :src="item"/>

把你的image标签换成img标签试试

vue中没有image标签

可能地址不对 ,或者 image 和 img标签的错。 html 里没有 image

检查一下图片路径