vue中cdn引入vuetify，实现轮播图

野性酷女 2023-02-10 03:44 17阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
      <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
      <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
      <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    </head>
    <body>
      <div id="app">
        <v-app>
          <template>
            <v-carousel>
              <v-carousel-item
                v-for="(item,i) in items"
                :key="i"
                :src="item.src"
                reverse-transition="fade-transition"
                transition="fade-transition"
              ></v-carousel-item>
            </v-carousel>
          </template>   
        </v-app>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
      <script>
        new Vue({
          el: '#app',
          vuetify: new Vuetify(),	  	 
    	  data () {
    	    return {
    	      items: [
    	        {
    	          src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
    	        },
    	        {
    	          src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
    	        },
    	        {
    	          src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
    	        },
    	        {
    	          src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
    	        },
    	      ],
    	    }
    	  },
    	   
        })	
      </script>
    </body>
    </html>

![format_png][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTY2ODNhM2VhYWU3ZGFmNjAucG5n?x-oss-process=image/format,png