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

第4节：Vue3 布尔属性

article 2025/1/10 20:28:18

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

<template>
  <view class="container">
    <text v-bind:is="isActive">{{ 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!');

    function toggleActive() {
      isActive.value = !isActive.value;
    }

    return {
      isActive,
      message,
      toggleActive,
    };
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>

在这个例子中，我们使用v-bind:is指令将isActive的值绑定到一个名为is的属性上。当isActive为true时，元素的is属性会被设置为"active"，使其显示为激活状态。

查看全文

http://www.kler.cn/a/161032.html