当前位置：首页 > article >正文

第5节：Vue3 JavaScript 表达式

article 2024/11/15 14:08:31

在 Vue3 中，JavaScript 表达式的使用方式与 Vue2 有所不同。

在 Vue3 中，你可以使用 v-bind 指令来绑定 JavaScript 表达式。例如：

<template>
  <div>{{ count }}</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0); // 创建一个响应式引用，初始值为 0
    return { count }; // 返回 count，使其可以在模板中使用
  },
};
</script>

在这个例子中，我们使用了 ref 函数创建了一个响应式引用 count，并将其初始值设置为 0。然后，我们在模板中使用了 {{ count }} 来显示 count 的值。当 count 的值发生变化时，视图会自动更新。

在 Vue3 中，你也可以使用计算属性（computed properties）来处理更复杂的 JavaScript 表达式。例如：

<template>
  <div>{{ fullName }}</div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const firstName = ref('John'); // 创建一个响应式引用，初始值为 'John'
    const lastName = ref('Doe'); // 创建一个响应式引用，初始值为 'Doe'
    const fullName = computed(() => `${firstName.value} ${lastName.value}`); // 创建一个计算属性，其值为 firstName 和 lastName 的组合
    return { fullName }; // 返回 fullName，使其可以在模板中使用
  },
};
</script>