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