vue点击按钮修改布尔属性

在Vue.js中，你可以通过给HTML中的按钮添加事件监听器（通常使用`v-on:click`指令），然后在对应的JavaScript绑定函数中修改组件的数据属性，这个数据属性通常是布尔类型的。这里是一个简单的例子：

<!-- 在模板文件 (.vue) 中 -->
<button @click="toggleBooleanProperty">点击我</button>
<template>
  <div>
    {{ showValue ? '显示' : '隐藏' }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      showValue: false, // 初始化布尔属性
    };
  },
  methods: {
    toggleBooleanProperty() {
      this.showValue = !this.showValue; // 当点击时，取反当前值
    },
  },
};
</script>

在这个例子中，当用户点击按钮时，`toggleBooleanProperty`方法会被调用，它会改变`showValue`的值，使其从`true`变为`false`，反之亦然。`{{ showValue ? '显示' : '隐藏' }}`会在模板中显示相应的文本，依赖于`showValue`的布尔状态。