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