vue中cdn引入vuetify，实现表格和分页

我会带着你远行 2023-02-10 03:44 14阅读 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-data-table
              :headers="headers"
              :items="desserts"
              :items-per-page="5"
              class="elevation-1"
            ></v-data-table>
          </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>
      
      <template>
        <v-data-table
          :headers="headers"
          :items="desserts"
          :items-per-page="5"
          class="elevation-1"
        ></v-data-table>
      </template>
      
     
      
      
      <script>
        new Vue({
          el: '#app',
          vuetify: new Vuetify(),	  	 
    	  data () {
    	    return {
    	      headers: [
    	        {
    	          text: 'Dessert (100g serving)',
    	          align: 'start',
    	          sortable: false,
    	          value: 'name',
    	        },
    	        { text: 'Calories', value: 'calories' },
    	        { text: 'Fat (g)', value: 'fat' },
    	        { text: 'Carbs (g)', value: 'carbs' },
    	        { text: 'Protein (g)', value: 'protein' },
    	        { text: 'Iron (%)', value: 'iron' },
    	      ],
    	      desserts: [
    	        {
    	          name: 'Frozen Yogurt',
    	          calories: 159,
    	          fat: 6.0,
    	          carbs: 24,
    	          protein: 4.0,
    	          iron: '1%',
    	        },
    	        {
    	          name: 'Ice cream sandwich',
    	          calories: 237,
    	          fat: 9.0,
    	          carbs: 37,
    	          protein: 4.3,
    	          iron: '1%',
    	        },
    	        {
    	          name: 'Eclair',
    	          calories: 262,
    	          fat: 16.0,
    	          carbs: 23,
    	          protein: 6.0,
    	          iron: '7%',
    	        },
    	        {
    	          name: 'Cupcake',
    	          calories: 305,
    	          fat: 3.7,
    	          carbs: 67,
    	          protein: 4.3,
    	          iron: '8%',
    	        },
    	        {
    	          name: 'Gingerbread',
    	          calories: 356,
    	          fat: 16.0,
    	          carbs: 49,
    	          protein: 3.9,
    	          iron: '16%',
    	        },
    	        {
    	          name: 'Jelly bean',
    	          calories: 375,
    	          fat: 0.0,
    	          carbs: 94,
    	          protein: 0.0,
    	          iron: '0%',
    	        },
    	        {
    	          name: 'Lollipop',
    	          calories: 392,
    	          fat: 0.2,
    	          carbs: 98,
    	          protein: 0,
    	          iron: '2%',
    	        },
    	        {
    	          name: 'Honeycomb',
    	          calories: 408,
    	          fat: 3.2,
    	          carbs: 87,
    	          protein: 6.5,
    	          iron: '45%',
    	        },
    	        {
    	          name: 'Donut',
    	          calories: 452,
    	          fat: 25.0,
    	          carbs: 51,
    	          protein: 4.9,
    	          iron: '22%',
    	        },
    	        {
    	          name: 'KitKat',
    	          calories: 518,
    	          fat: 26.0,
    	          carbs: 65,
    	          protein: 7,
    	          iron: '6%',
    	        },
    	      ],
    	    }
    	  },	   
        })	
      </script>
    </body>
    </html>

![format_png][]

放在json里面

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