“Vue 图片切换”的版本间的差异
跳到导航
跳到搜索
Jihongchang(讨论 | 贡献) |
Jihongchang(讨论 | 贡献) |
||
第5行: | 第5行: | ||
2.添加图片索引 | 2.添加图片索引 | ||
− | 3.绑定 src 属性<syntaxhighlight lang="html"> | + | 3.绑定 src 属性 |
+ | |||
+ | 4.图片切换逻辑<syntaxhighlight lang="html"> | ||
<div id="#app"> | <div id="#app"> | ||
<img :src="imgArr[index]"> | <img :src="imgArr[index]"> |
2023年8月8日 (二) 02:27的版本
https://www.bilibili.com/video/BV12J411m7MG/?p=14
1.定义图片数组
2.添加图片索引
3.绑定 src 属性
4.图片切换逻辑
<div id="#app">
<img :src="imgArr[index]">
<a href="#">上一张</a>
<a href="#">下一张</a>
</div>
var app = new Vue({
el:"#app",
data:{
imgArr:[],
index:0
},
methods:{
prev:function(){},
next:function(){}
}
})