Vue實(shí)現(xiàn)簡(jiǎn)單圖片切換效果
更新時(shí)間：2021年06月24日 15:44:05 作者：zmt0104
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)簡(jiǎn)單圖片切換的具體代碼，供大家參考，具體內(nèi)容如下
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>圖片切換</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#app{
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 400px;
}
#left{
position: relative;
top:-240px;
left: -45px;
font-size: 50px;
}
#right{
position: relative;
top: -300px;
left: 595px;
font-size: 50px;
}
a{
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 要輪詢的圖片 -->
<img :src="imgArr[index]"/>
<!-- 左箭頭 -->
<a href="javascript:void(0)" id="left" @click="prev" v-show="index!=0">《</a>
<!-- 右箭頭 -->
<a href="javascript:void(0)" id="right" @click="next" v-show="index<imgArr.length-1">》</a>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
imgArr:[
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg",
"img/5.jpg",
],
index: 0,
},
methods: {
prev: function(){
this.index--;
},
next: function(){
this.index++;
},
}
})
</script>
</body>
</html>
總結(jié)：
- 列表數(shù)據(jù)使用數(shù)組保存；
- v-bind指令可以設(shè)置元素屬性，如src ；
- v-show和v-if都可以切換元素的顯示狀態(tài)，但頻繁切換推薦使用v-show
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue鼠標(biāo)滾輪滾動(dòng)切換路由效果的實(shí)現(xiàn)方法
- vue實(shí)現(xiàn)滾動(dòng)鼠標(biāo)滾輪切換頁面
- vue使用swiper實(shí)現(xiàn)左右滑動(dòng)切換圖片
- vue實(shí)現(xiàn)按鈕切換圖片
- vue自定義js圖片碎片輪播圖切換效果的實(shí)現(xiàn)代碼
- vue實(shí)現(xiàn)圖片切換效果
- Vue實(shí)現(xiàn)base64編碼圖片間的切換功能
- vue卡片式點(diǎn)擊切換圖片組件使用詳解
- vue+js點(diǎn)擊箭頭實(shí)現(xiàn)圖片切換
- Vue實(shí)現(xiàn)鼠標(biāo)懸浮切換圖片src
相關(guān)文章
Vue2.0利用vue-resource上傳文件到七牛的實(shí)例代碼
本篇文章主要介紹了Vue2.0利用vue-resource上傳文件到七牛的實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
vue如何實(shí)現(xiàn)對(duì)請(qǐng)求參數(shù)進(jìn)行簽名
這篇文章主要介紹了vue如何實(shí)現(xiàn)對(duì)請(qǐng)求參數(shù)進(jìn)行簽名問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Element?Plus?去掉表格外邊框的實(shí)現(xiàn)代碼
使用el-table組件拖拽時(shí),?想使用自定義樣式進(jìn)行拖拽,?想去掉外邊框,?并在表頭加入豎杠樣式,本文給大家介紹Element?Plus?去掉表格外邊框的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2025-04-04
css文件可以直接引入到main.js中,scss文件如果沒有scss特殊語法也可以直接引入index.js,只有scss文件中的特殊語法全局引入的時(shí)候無法顯示,所以需要特殊處理,下面這篇文章主要給大家介紹了關(guān)于vue全局引入scss樣式文件的相關(guān)資料,需要的朋友可以參考下2022-11-11
如何通過URL來實(shí)現(xiàn)在Vue中存儲(chǔ)業(yè)務(wù)狀態(tài)實(shí)用技巧
這篇文章主要為大家介紹了如何通過URL來實(shí)現(xiàn)在Vue中存儲(chǔ)業(yè)務(wù)狀態(tài)實(shí)用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
vue的.vue文件是怎么run起來的(vue-loader)
通過vue-loader，解析.vue文件，在webpack解析，拆解vue組件 ，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下2018-12-12
Vue3監(jiān)聽屬性與Computed的區(qū)別詳解
在 Vue 3 中,watch 和 computed 都是非常重要的概念,它們都可以用于觀察和響應(yīng)數(shù)據(jù)的變化,但在使用場(chǎng)景和原理上存在明顯的區(qū)別,本文將詳細(xì)解析 Vue 3 中監(jiān)聽屬性 (watch) 和計(jì)算屬性 (computed) 的區(qū)別,需要的朋友可以參考下2024-02-02
VUE 單頁面使用 echart 窗口變化時(shí)的用法
這篇文章主要介紹了VUE 單頁面使用 echart 窗口變化時(shí)的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue項(xiàng)目如何關(guān)閉語法檢查問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
element編輯表單el-radio回顯之后無法選擇的問題解決
今天主要來談一下element-ui編輯表單中的el-radio回顯之后無法選擇的問題，主要涉及到vue的雙向綁定，以及element-ui編輯表單中的el-radio的默認(rèn)類型，感興趣的可以了解一下2021-08-08