在 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>
在这个例子中，我们使用了 computed 函数创建了一个计算属性 fullName，其值为 firstName 和 lastName 的组合。当 firstName 或 lastName 的值发生变化时，fullName 的值会自动更新。
