“Vue 图片切换”的版本间的差异

来自姬鸿昌的知识库
跳到导航 跳到搜索
(建立内容为“https://www.bilibili.com/video/BV12J411m7MG/?p=14”的新页面)
 
第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
  }
})