Vue local application picture switching v-show v-bind practice

Clicking to switch the essence of the picture actually modifies the src attribute of the img tag.

There are many addresses of pictures. In js, an array is used to store multiple data. The value of the array is combined with the index. According to the index, it can be judged whether it is the first picture or the last picture.

The essence of the change of the picture is that the src attribute is modified, and the modification of the attribute uses the v-bind command.

The a tag needs to execute logic when it is clicked, so the event binding is v-on, and a certain a tag is hidden in the first and last pictures, because the switching is more frequent, considering performance issues, use the v-show command.

First, define the image array, define the data array in data, and store the address in it.

Then add the image index, if it is obtained from the first array, then the value is 0.

Then use the v-bind command to bind the address to the src attribute of img, and the way to get it is actually an array + index

Clicking on the previous and next pictures essentially modifies the value of the index. The logic of this part is written in methods.

The next one can be named pre next, the logic is simple, just need to increment and decrement the index

The display conditions of the left and right arrows are slightly different, one is not the first one, and the index is not 0. If it is not the last one, it is only necessary to judge that the corresponding length is smaller than the array, and the instruction uses v-show.

The button on the left can be used only if the index is not 0, which is equivalent to the first one. The button on the right can be displayed only if it is smaller than the length of the array.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style type="text/css">

    </style>
</head>
 
<body>  
<div id="app">
  <!--现在是基于数据来生成src的属性-->
  <button type="button" @click="pre" v-show="index!= 0">上一张</button>
  <button type="button" @click="next" v-show="index<imgArr.length-1">下一张</button>
  <img :src="imgArr[index]" alt="">
</div>
         
    <script type="text/javascript">        
      new Vue({   
          el: "#app",   
          data:{ 
            imgArr:[
              "./1.jpg",
              "./2.jpg",
              "./3.jpg",
            ],
            index: 0,
          },
          methods:{
            pre:function(){
               this.index--;
            },
            next:function(){
               this.index++;
            }
          }
       })
    </script>
 
</body>
</html>

It is also possible to use v-if here. v-if is to directly remove the element from the DOM tree, which will consume more performance and is not recommended.

Vue local application picture switching v-show v-bind practice

Guess you like