今天是跟着黑马自学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,
}
这是我获取数组中的值的方法:
尝试了好几遍图片依旧没有显示,我在想是否结构中表达无法获取数组中的值呢? 于是我尝试在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
检查一下图片路径