Vue.js 如何仅在指定条件下绑定点击事件？

你当前代码里的判断条件和需求不符，先修正逻辑后，可通过以下几种清晰的方式实现：

方式一：模板内短路求值（简洁写法） #

直接在@click中用逻辑与（&&）实现，仅当条件满足时执行方法：

<div class="relative h-20 border border-gray-100 sm:h-24" 
  @click="(!date.disabled || date.availability === 'none') && selectDate(date)">
  {{date}}
</div>

方式二：抽离逻辑到方法中（易维护） #

把判断逻辑放到方法里，让模板更简洁，也方便后续扩展：

<template>
  <div class="relative h-20 border border-gray-100 sm:h-24" 
    @click="handleDateClick(date)">
    {{date}}
  </div>
</template>

<script>
export default {
  methods: {
    handleDateClick(date) {
      if (!date.disabled || date.availability === 'none') {
        this.selectDate(date);
      }
    },
    selectDate(date) {
      // 这里编写日期选择的具体逻辑
    }
  }
}
</script>

方式三：Vue 3组合式API写法 #

如果使用Vue 3的<script setup>语法，可这样写：

<template>
  <div class="relative h-20 border border-gray-100 sm:h-24" 
    @click="handleDateClick(date)">
    {{date}}
  </div>
</template>

<script setup>
const handleDateClick = (date) => {
  if (!date.disabled || date.availability === 'none') {
    selectDate(date);
  }
};

const selectDate = (date) => {
  // 日期选择逻辑
};
</script>

注意：你原代码中的判断条件是!date.disabled || date.availability !== 'none'，和需求的!date.disabled || date.availability === 'none'不一致，这是核心问题，必须修正条件才能达到预期效果。

内容的提问来源于stack exchange，提问作者Waleed Tariq