select的双向绑定方法

首先看官网的介绍,明确指出v-model指令在表单<input>、<textarea>、<select>中使用

  • 在select中绑定一个v-model

下面这段代码的含义:为select绑定了一系列的内容,然后option里面的值是根据data里面的selectItem展示,selectItemContain需要在data里面申明

      <select name="chooseTimeSort"
              id="chooseTimeSort"
              class="chooseTimeSort"
              v-model="selectItemContain"
              @click="getTimeSequence"
      >
        <option :value="item.value" v-for="(item,index) of selectItem" :key="index">{{item.name}}</option>
      </select>

getTimeSequence(){
    console.log(this.selectItemContain);
}

然后如果用户点击了select里面的值,可以改变selectItemContain的值,就可以正确显示用户选择的,注意是按照option里面的value来哈,如果需要得到里面的值,可以直接console.log(this.selectItemContain);

  • 使用$event去获取内容

在之前的博客中大致说了下,$event可以获取当前节点的内容

      <select name="chooseTimeSort"
              id="chooseTimeSort"
              class="chooseTimeSort"
//如果只有一个参数,$event可以省略不写,但是在函数中可以直接在函数使用
              @click="getTimeSequence($event)"
      >
        <option :value="item.value" v-for="(item,index) of selectItem" :key="index">{{item.name}}</option>
      </select>

getTimeSequence(e){
    console.log(e.target.value);
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值