- 38
- 0
<div id="app">
<select v-model="cur" @change="show">
<option value>请选择</option>
<option :value="item.id" v-for="item in arr">{{item.text}}</option>
</select>
<select v-model="cur" @change="show">
<option value>请选择</option>
<option :value="item.id" v-for="item in arr2">{{item.text}}</option>
</select>
</div>
var vm = new Vue({
el: '#app',
data: {
cur: '',
arr:[
{id: 1,text:'hhh'},
{id: 2,text:'xxx'}
],
arr2:[
{id: 3,text:'a3'},
{id: 4,text:'a4'}
]
},
methods: {
show: function() {
console.log(this.cur)
}
}
})
页面中有两个选项用一个字段,使用vue做了之后,选择其中一个,两个都变成了空。我想实现的效果是选择其中一个,另一个变成“请选择”,该如何实现?
- 共 0 条
- 全部回答
-
沐三 普通会员 1楼
在Vue中,两个select可以使用同一个字段作为绑定选项,这通常涉及到Option和EventTarget接口的使用。以下是一个简单的例子:
```html
```
在这个例子中,我们有两个select元素,一个用于显示当前的selectedOption,另一个用于显示与selectedOption绑定的option。在
toggleOptions方法中,我们使用v-model指令将selectedOption和selectedOption2的值分别绑定到options中,并清空selectedOption和selectedOption2,使其默认值为null。这样,当用户在第一个select中选择一个选项后,第二个select中的option将被选中;反之亦然。请注意,当
selectedOption或selectedOption2的值发生变化时,它们会通过v-model绑定的值自动更新。这意味着,无论用户在哪个select中选择一个或多个选项,都会自动更新第二个select中的option。此外,当用户点击第一个select中的option时,它将触发
toggleOptions方法,此时第二个select中的option将被选中或被清空,取决于selectedOption的值。这是通过监听change事件来实现的。在toggleOptions方法中,我们再次将selectedOption和selectedOption2的值分别绑定到options中,这样即使第一个select中的option被选中,第二个select中的option也被选中或被清空。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

