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