So verweisen Sie direkt auf Vue und Element-UI in HTML

Der Code sieht folgendermaßen aus:

<!DOCTYPE html>
<html>

<Kopf>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</Kopf>

<Text>
    <div id="app">
        <el-button round @click="visible = true">Abgerundeter Knopf</el-button>
        <br>
        <el-dialog :visible.sync="visible" title="Hallo Welt">
            <p>Element ausprobieren</p>
        </el-dialog>
        <br>

        <el-switch v-model="value1" active-text="Monatliche Zahlung" inactive-text="Jährliche Zahlung">
        </el-Schalter>
        <el-switch style="Anzeige: Block" v-model="Wert2" Aktivfarbe="#13ce66" Inaktivfarbe="#ff4949"
            active-text="Monatliche Zahlung" inactive-text="Jährliche Zahlung">
        </el-Schalter>

        <br>
        <el-time-picker is-range v-model="Wert1" range-separator="bis" start-placeholder="Startzeit" end-placeholder="Endzeit"
            Platzhalter="Wählen Sie einen Zeitraum">
        </el-Zeitpicker>
        <el-time-picker is-range arrow-control v-model="Wert2" range-separator="bis" start-placeholder="Startzeit"
            end-placeholder="Endzeit" placeholder="Zeitraum auswählen">
        </el-Zeitpicker>
        <br>

        <el-progress Typ="Kreis" :Prozent="0"></el-progress>
        <el-progress Typ="Kreis" :Prozent="25"></el-progress>
        <el-progress Typ="Kreis" :Prozent="100" Status="Erfolg"></el-progress>
        <el-progress Typ="Kreis" :percentage="70" status="Warnung"></el-progress>
        <el-progress Typ="Kreis" :Prozent="50" Status="Ausnahme"></el-progress>
        <br>
        <el-Zeile>
            <el-button icon="el-icon-search" Kreis></el-button>
            <el-button type="primary" icon="el-icon-edit" kreis></el-button>
            <el-button Typ="Erfolg" Symbol="el-icon-check" Kreis></el-button>
            <el-button type="info" icon="el-icon-message" kreis></el-button>
            <el-button type="Warnung" icon="el-icon-star-off" Kreis></el-button>
            <el-button type="Gefahr" icon="el-icon-delete" Kreis></el-button>
        </el-row>
        <br>
        <el-steps :active="1" finish-status="erfolgreich">
            <el-step title="Bezahlt"></el-step>
            <el-step title="Rückerstattung in Bearbeitung"></el-step>
            <el-step title="Rückerstattet"></el-step>
            <el-step title="Ausstehende Einigung"></el-step>
            <el-step title="Erledigt"></el-step>
        </el-Schritte>
    </div>
</body>
<Skript>
    neuer Vue({
        el: '#app',
        Daten: Funktion () {
            return { sichtbar: false }
        }
    })
</Skript>

</html>

Der Effekt ist wie unten dargestellt:

Bildbeschreibung hier einfügen

Zusammenfassen

Dies ist das Ende dieses Artikels zum direkten Verweisen auf Vue und Element-UI in HTML. Weitere relevante Inhalte zum Verweisen auf Vue und Element-UI in HTML finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Lösung für das Problem der adaptiven Höhe und Breite der CSS-Anzeigetabelle

>>: Verabschieden Sie sich vom Hard-Coding und lassen Sie Ihre Front-End-Tabelle den Instanzcode automatisch berechnen