指令系统

<div id="app">
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>

    <ul>
        <li v-for="(item, i) in fruits" :key="item.id">
            {{ i + 1 }}. {{ item.name }}
        </li>
    </ul>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
    data() {
        return {
            score: 85,
            fruits: [
                { id: 1, name: "苹果" },
                { id: 2, name: "香蕉" },
                { id: 3, name: "橘子" }
            ]
        };
    }
}).mount("#app");
</script>