Vue3.2.2新特性

setup頂層寫法(實驗特性 → 新特性)

<script setup>

(用法)

新的SFC功能

v-bind可以用在SFC

<style>

标簽中綁定響應式資料的值。

兩種新特性的協同工作 Demo

<template>
  <div class="home">
    <h2>Vue3.2.2新特性</h2>
    <hr />
    <h2>age:{{ age }}</h2>
    <button @click="changeAge">+1</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
const age = ref(21);
const changeAge = () => {
  age.value++;
};
const color = ref("red");
</script>

<style scoped>
.home {
  color: v-bind(color);
}
</style>