如何在 vue 中隐藏和显示 div onchange？

Question

我想在选择值更改时隐藏或显示。

这里是选择

 <ion-item>
          <ion-label>Select Role</ion-label>
          <ion-select
            v-model="role"
            
            ok-text="OK"
            cancel-text="Dismiss"
          >
            <ion-select-option value="1">Agent</ion-select-option>
            <ion-select-option value="2">Ranch</ion-select-option>
            <ion-select-option value="3">Worker</ion-select-option>
            <ion-select-option value="4">Right Hand Man</ion-select-option>
            <ion-select-option value="5">Independent Contractor</ion-select-option>
            <ion-select-option value="6">Packaging Company</ion-select-option>
            <ion-select-option value="7">Cutting Company</ion-select-option>
            <ion-select-option value="8">Supervisor</ion-select-option>
            <ion-select-option value="9">Boss</ion-select-option>
            <ion-select-option value="10">Truck</ion-select-option>
          </ion-select>
        </ion-item>

这里是 div

<div v-if="role==2">
</div>

我尝试查看此属性，但仍然无法正常工作

 watch:
    {
    
  role:function(value) {
  
      this.role = value;
       
      console.log(this.role);
    
      }
    }

Answer 1

尝试用冒号设置

<ion-select-option :value="1">Agent</ion-select-option>

而不是

<ion-select-option value="1">Agent</ion-select-option>