zoukankan      html  css  js  c++  java
  • vuetifyjs demo

    vuetifyjs官网

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <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">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <!-- vuetify UI 组件的,需要将其放在v-app标签内-->
            <v-app>
                <v-alert
                        type="success"
                ></v-alert>
                <v-btn color="success">Success</v-btn>
                <v-btn color="error">Error</v-btn>
                <v-btn color="warning">Warning</v-btn>
                <v-btn color="info">Info</v-btn>
            </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>
            new Vue({
                el: '#app',
                vuetify: new Vuetify(),
            })
        </script>
    </body>
    </html>
    
  • 相关阅读:
    JS 实现鼠标移入移出透明度动画变化效果
    Undefined和null的本质区别
    网格布局知识点总结
    用CSS3搭建立方体
    缩放实例
    浮动与细线边框制作广告商标
    用伪元素制作列表菜单
    元素的分类与转换
    网易云导航栏
    CSS中内边距和宽度内减
  • 原文地址:https://www.cnblogs.com/fly-book/p/14515862.html
Copyright © 2011-2022 走看看