vue在html中的使用

EN
EN
2023-02-02 / 0 评论 / 303 阅读 / 正在检测是否收录...

vue在html中的使用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .active{
            color: red;
        }
    </style>
<div id="app">
    {{ message }}


    <hr>
    <span  :class="{ active: isActive }">{{count}} 是 1 吗?{{ count == 1 ? 'Yes' : 'No' }}</span>

    <hr>
    <span>当前时间:{{nows}}</span>
    <br>
    <span>{{fullName}}  ( {{firstName}} {{lastName}} )</span>
    <br>
    <span>{{languageBooksLength}}</span>

    <hr>
    <ul>
        <li v-for="(item, index) in languageBooks">
            {{ index }} - {{ item }}
        </li>
    </ul>

    <span v-for="item of languageBooks">{{ item }} , </span>
    <hr>

    <h1 v-if="awesome">Vue is awesome!</h1>
0

评论 (0)

取消