vue组件中的布尔值data无法赋值

项目场景：

在vue的data函数中设置一个布尔值，用于切换内容的显示和隐藏

---

问题描述：

showAble数值无法切换成true，点击按钮无法切换showAble，控制台也没报错

<span :mouseleave="close()">
  <div @click="toggle()">切换</div>
  <ul v-show="showAble">
    <li v-for="(item, index) in option" :key="index">{{item.name}}</li>
  </ul>
</span>
...
data() {
  return {
    showAble: false,
    option: []
  }
},
methods: {
  toggle() {
    console.log(this.showAble);
    this.showAble = !this.showAble;
  },
  close() {
    this.showAble = false;
  }
}

---

原因分析：

在toggle()函数使用之前代码有隐藏bug，导致程序中断，mouseleave事件的使用是v-on:mouseleave，v-on缩写应该是@

---

解决方案：

:mouseleave 改成 @mouseleave