頁面效果比較差,但是有圖總比沒圖強點
這是最開始的頁面,我們看到,圖中只有一個"右箭頭",點擊右箭頭;
左箭頭也有了,然后我們繼續點擊右箭頭;
右箭頭沒有了,只剩下了左箭頭,
以上就全部的效果圖了;
分析一下,如何做到這個功能:
1.先不要去考慮樣式(雖然確實丑,但景色還是不錯的對吧),我們一般都是怎樣存放多條數據的呢?
2.我們應該如何去隱藏左箭頭按鈕或者右箭頭按鈕呢?
3.vue指令中隱藏的指令有哪些?有什么不同呢?
好,第一,我們一般存放數據都是采用數組的方式,方便存放多條數據,因為數組有長度和索引,方便查找;
第二 ,當圖片是第一張時,我們隱藏左箭頭按鈕,因為已經是第一張了,不能再繼續點擊了.當圖片為最后一張時,隱藏右箭頭,因為已經是最后一張了,當圖片不是一張和最后一張時,左右箭頭都顯示;
第三.vue指令中 有兩個是用來隱藏和顯示的,1.v-show 2.v-if
它們的區別:v-show是操作dom節點的屬性(display:none) 而v-if則比較狠,它直接刪除了該dom節點,需要顯示的時候再加過來;
相對於v-show來說 v-if比較消耗資源;較為頻繁的隱藏顯示,推薦使用v-show;至於v-if則視情況而定
上代碼:
第一步,仍然是先導入vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style> .top{ border: 1px solid ; width: 600px; height: 450px; margin-left: 30%; margin-top: 5%; } .img{ width: 600px; height: 450px; } .left{ width: 45px; height: 45px; } #left{ width: 45px; height: 45px; background-color:red ; margin-left: 30%; margin-top: -25%; } #right{ width: 45px; height: 45px; margin-left: 66.5%; margin-top: -3.65%; } </style>
這個是我寫的樣式;
<body> <div id="app"> <div class="top"> <img class="img" :src="imgArr[index]" alt=""> </div> <div id="left"> <a href="javascript:void(0)" @click="left" v-show='index!=0'> <img class="left" src="./img/left.jpg"> </a> </div> <div id="right"> <a href="javascript:void(0)" @click="right" v-show='index<imgArr.length-1'> <img class="left" src="./img/right.jpg"> </a> </div> </div> </body> <script> var vm = new Vue({ el:'#app', data:{ imgArr:[ "./img/0.jpg", "./img/1.jpg", "./img/2.jpg", ], index:0 }, methods:{ left:function(){ this.index--; }, right:function(){ this.index++; console.log(this.index) } } }) </script>
詳細解釋一下,我們可以看到 在div img的src 路徑是在data中寫的,所以在vue中我們切換圖片操作的是數據;
我們在data中創建一個數組imgArr[],在數據中添加進去數據,也就是圖片;然后在創建一個index(下標)=0;
這樣,我們就可以將<img class="img" src="./img/0.jpg" alt=""> 中的src進行改變了,
將src="./img/0.jpg" 改成 :src="imgArr[index]"
注意區別: 改之后src前面有一個":",這其實是v-bind:的縮寫,所以改之后就是vue的指令了;
這時,我們運行就可以看到第一張圖片顯示出來了;
然后我們再去寫左右箭頭,寫兩個方法吧,"left"和"right";
邏輯很清晰,當我們點擊左箭頭按鈕時,就將下標index-1.同理,點擊右鍵頭就+1;
如上圖我們寫那樣 this.index++ this.index--;
寫好這些以后我們發現就可以切換圖片了,但是,當index為負數時,就不會出現圖片了,這時我們就要給添加一個限制了
邏輯也很簡單,分析一下,我們采用的數組存數據,那么我們可以以數組下標為限制 那么我們在左箭頭按鈕上就寫vue指令 v-show="index!=0"
意思是當index不等0的時候顯示,當index=0時候隱藏; 左箭頭寫好了;
那么右鍵頭,我們可以采取與數組的長度作比較; 如: index<imgArr.length -1,同理也寫在v-show中;
這樣當index下標等於數組長度-1時就會隱藏,這樣到了最后一張就會隱藏了;