vue简单的导航栏

Posted 2021-01-22 hujun-2018

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue简单的导航栏相关的知识，希望对你有一定的参考价值。

<style>
  img{
    display:block;
    margin:0 auto;
    width:500px;
    height:500px;
  }
    #app li{
    list-style: none;
  }

</style>
<body>
    <div id="app">

       <img :src="img" @click="autoCg()"> <!--显示一张图片，并给图片添加点击事件-->
          <ul>
                    <li v-for="(item,index) in json"></li>
          </ul>
          <button @click="prev">上一张</button>
          <button @click="next">下一张</button>
   </div>
</body>
<script>


       new Vue({
           el:‘#app‘,
           data:{
               img:‘./images/cao.jpg‘,
               json:[
                   "./images/cao.jpg",
                   "./images/hua.jpg",
                   "./images/ning.jpg",
                   "./images/shu.jpg",
               ],
               index:0
           },
           methods:{
               next(){
                   this.img = this.json[this.index++];
                   if(this.index > 3){
                       this.index = 0; //当超过图片数量，返回第一张图片
                   }
               },
               prev(){
                   this.img = this.json[this.index--];
                   if(this.index < 0){
                       this.index = 3;
                   }
                   //当index值<0时，返回最后一张图片
               },
               //点击首张图片触发函数功能
               autoCg(){
                   let self = this;
                   //定时器，每2秒换一张图片
                   setInterval(function(){
                       self.img = self.json [self.index++];
                       if(self.index > 3){
                           self.index = 0;
                       }
                   },2000);
               }

           },



   })
</script>

以上是关于vue简单的导航栏的主要内容，如果未能解决你的问题，请参考以下文章