Vue實現(xiàn)簡單圖片切換效果
更新時間：2021年06月24日 15:44:05 作者：zmt0104
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡單圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue實現(xià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
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue2.0利用vue-resource上傳文件到七牛的實例代碼
本篇文章主要介紹了Vue2.0利用vue-resource上傳文件到七牛的實例代碼，具有一定的參考價值，有興趣的可以了解一下2017-07-07
vue如何實現(xiàn)對請求參數(shù)進(jìn)行簽名
這篇文章主要介紹了vue如何實現(xiàn)對請求參數(shù)進(jìn)行簽名問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Element?Plus?去掉表格外邊框的實現(xiàn)代碼
使用el-table組件拖拽時,?想使用自定義樣式進(jìn)行拖拽,?想去掉外邊框,?并在表頭加入豎杠樣式,本文給大家介紹Element?Plus?去掉表格外邊框的實現(xiàn)代碼,感興趣的朋友一起看看吧2025-04-04
css文件可以直接引入到main.js中,scss文件如果沒有scss特殊語法也可以直接引入index.js,只有scss文件中的特殊語法全局引入的時候無法顯示,所以需要特殊處理,下面這篇文章主要給大家介紹了關(guān)于vue全局引入scss樣式文件的相關(guān)資料,需要的朋友可以參考下2022-11-11
如何通過URL來實現(xiàn)在Vue中存儲業(yè)務(wù)狀態(tài)實用技巧
這篇文章主要為大家介紹了如何通過URL來實現(xiàn)在Vue中存儲業(yè)務(wù)狀態(tài)實用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
vue的.vue文件是怎么run起來的(vue-loader)
通過vue-loader，解析.vue文件，在webpack解析，拆解vue組件 ，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下2018-12-12
Vue3監(jiān)聽屬性與Computed的區(qū)別詳解
在 Vue 3 中,watch 和 computed 都是非常重要的概念,它們都可以用于觀察和響應(yīng)數(shù)據(jù)的變化,但在使用場景和原理上存在明顯的區(qū)別,本文將詳細(xì)解析 Vue 3 中監(jiān)聽屬性 (watch) 和計算屬性 (computed) 的區(qū)別,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了VUE 單頁面使用 echart 窗口變化時的用法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue項目如何關(guān)閉語法檢查問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
element編輯表單el-radio回顯之后無法選擇的問題解決
今天主要來談一下element-ui編輯表單中的el-radio回顯之后無法選擇的問題，主要涉及到vue的雙向綁定，以及element-ui編輯表單中的el-radio的默認(rèn)類型，感興趣的可以了解一下2021-08-08