第7节：Vue3 动态绑定多个属性

可以使用v-bind指令将多个属性动态绑定到元素上。以下是一个简单的实例：

<template><view class="container"><text v-bind="dynamicProps">{{ message }}</text><button @click="toggleActive">切换激活状态</button></view>
</template><script>
import { ref } from 'vue';export default {setup() {const isActive = ref(false);const message = ref('Hello, uniapp!');const dynamicProps = computed(() => ({class: isActive.value ? 'active' : '','aria-label': message.value,}));function toggleActive() {isActive.value = !isActive.value;}return {isActive,message,dynamicProps,toggleActive,};},
};
</script><style scoped>
.container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;
}.active {color: red;
}
</style>

在这个例子中，我们使用computed函数创建了一个名为dynamicProps的计算属性，它根据isActive和message的值动态生成一个包含多个属性的对象。然后，我们使用v-bind指令将这些动态属性绑定到 元素上。

订阅专栏，每日更新

第8节：Vue3 全局访问