vue 获取select的值及动态添加option

前端代码

<div id="app">
    <select class="form-control con1" @change="changeProduct($event)">
        <option value="" disabled selected>请选择</option>
        <option v-for="item in list" :value="item">{{item}}</option>
    </select>
</div>

js代码

new Vue({
   el:"#app",
   data:{
      list:[]
   },
   methods: {
      changeProduct(event){
           console.log(event.target.value)
       }
    }
 })

动态添加option

var arr = [1,2,3,4,5];
for(var i=0; i < arr.length; i++){
     this.list.push(arr[i]);
 }

 

### 回答1: 可以通过v-model指令来绑定select元素的选中,例如: ``` <template> <div> <select v-model="selected"> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> <button @click="showSelected">显示选中</button> </div> </template> <script> export default { data() { return { selected: '' // 默认选中为空 } }, methods: { showSelected() { console.log(this.selected) // 输出选中的 } } } </script> ``` 在上面的代码中,我们通过v-model指令将select元素的选中绑定到了组件的data属性中的selected变量上。当用户选择了某个选项时,selected变量的会自动更新。我们可以通过showSelected方法来获取选中的并进行处理。 ### 回答2: 在Vue获取select选中的option有多种方法,这里介绍两种比较简单的方法。 第一种方法是使用v-model指令,将select的选中项绑定到Vue组件中的一个变量上。具体来说,在select标签中添加v-model属性,同时在Vue组件中定义一个与v-model属性相同的变量。 例如,如果我们有一个select标签如下: ```html <select v-model="selectedOption"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> ``` 那么在Vue组件中可以这样定义一个名为selectedOption的data属性: ```js data() { return { selectedOption: '' } } ``` 此时,selectedOption会随着用户在select中选中的项而改变。 第二种方法是通过事件监听来获取select的选中项。具体来说,可以在select标签上添加change事件监听器,在事件处理函数中获取当前选中的option的value。 例如,我们有一个select标签如下: ```html <select @change="handleChange"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> ``` 那么在Vue组件中定义一个名为handleChange的函数,用来处理select的change事件: ```js methods: { handleChange(event) { const selectedOption = event.target.value // do something with selectedOption } } ``` 在handleChange函数中,可以通过event.target.value来获取当前选中的option的value。 以上两种方法都可以获取select选中的option,具体选择哪种取决于实际需求。V-model更加简单直接,而事件监听更加灵活可定制。 ### 回答3: 在Vue获取Select选中的Option有多种方式。 1.使用v-model指令 通过在select标签中使用v-model指令可以实现双向数据绑定。那么在vue组件中,在data中定义一个变量,通过v-model指令使select选中的option的value绑定到这个变量上。这样select选中的option就可以在组件的其他地方使用了。 2.使用ref属性 在select标签加上ref属性,并在Vue组件中通过this.$refs获取对应的DOM元素。可以通过获取这个DOM元素的value属性获取当前选中的option的value。如下面的代码所示: ``` <template> <div> <select ref="mySelect"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> </select> <button @click="getValue">获取选中的Option</button> </div> </template> <script> export default { methods: { getValue() { const value = this.$refs.mySelect.value; console.log(value); }, } } </script> ``` 3.监听change事件 在select标签中添加change事件监听函数。当选中的option发生变化时,这个函数会被自动调用,并传入一个event对象。通过这个event对象的target属性,可以获取到当前选中的option标签,从而获取到对应的value。如下面的代码所示: ``` <template> <div> <select @change="onChange"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> </select> </div> </template> <script> export default { methods: { onChange(event) { const value = event.target.value; console.log(value); }, } } </script> ``` 以上三种方法可以在Vue获取select选中的option。具体使用哪种方法可以根据项目需求来选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值