[JavaScript知识库]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>