vue中<select>绑定事件
<div id="app">
<select v-model="selectItem" @change="selectFn($event)">
<!--选择项的value值默认选择项文本 可动态绑定选择项的value值 更改v-model指令绑定数据-->
<option v-for="item in items" :value="item.id">{{item.name}}</option>
</select>
<div>{{selectItem}}</div> <!--选择项的value值-->
</div>
<script>
new Vue({
el: '#app',
data: {
selectItem: '分类1',
items: [
{id:11, name: '分类1'},
{id:22, name: '分类2'},
{id:33, name: '分类3'}
]
},
methods: {
selectFn(e) {
console.log(e)
console.log(e.target.selectedIndex) // 选择项的index索引
console.log(e.target.value) // 选择项的value
}
}
})
</script>
vue中<select>绑定事件的更多相关文章
- vue中组件绑定事件时是否加.native
组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- < ...
- vue中select设置默认选中
vue中select设置默认选中 一.总结 一句话总结: 通过v-model来:select上v-model的值为option默认选中的那项的值(value) 二.select设置默认选中实例 < ...
- jquery-10 jquery中的绑定事件和解绑事件的方法是什么
jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...
- jquery中on绑定事件
之前项目中动态创建的标签元素 在绑定事件的时候 都是无效 无论如何都不能触发 eg:在页面加载完成之后 再由脚本动态创建的<div>元素 在绑定事件的时候 例如click事件 ...
- jquery appaend元素中id绑定事件失效问题
1. 在jquery中append元素,如果该元素中有id值并且绑定事件,那么该id事件会失效,必须刷新一下才能使用. 2.解决办法: 举例:如果在一个<div class="titl ...
- 记一笔vue中的中央事件总线的问题,以及解决方案
代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bu ...
- Jquery中on绑定事件 点击一次 执行多次 的解决办法
举个例子,在同一个页面有下拉选择框 <select class="mySelect"> <option value="user">按用户 ...
- vue中bus.$on事件被多次绑定
问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发 解决办法一:在每次调用方法前先解绑事件( bus.$off ),然后在重新绑定( bus.$on ) b ...
- vue中把一个事件绑定到子组件上
官网上是这样描述的 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件.这时,你可以使用 v-on的 .native 修饰符 父组件App.vue <template> <d ...
随机推荐
- Go 初体验 - 闭包的几种情况
闭包: 闭包是可以包含自由(未绑定到特定对象)变量的代码块,这些变量不在这个代码块内或者任何全局上下文中定义,而是在定义代码块的环境中定义.要执行的代码块(由于自由变量包含在代码块中,所以这些自由变量 ...
- redis 有序集合(zset)函数
redis 有序集合(zset)函数 zAdd 命令/方法/函数 Adds the specified member with a given score to the sorted set stor ...
- Delphi使用两种不同方法获取系统端口信息--(装载)
Delphi使用两种方法获取windows系统的端口,还可测试发送消息,点击获取端口信息后,可依次得到如下信息:DCB结构大小.波特率大小.XON的临界值.XOFF的临界值.字符位数.奇偶检验位.停止 ...
- 文本框defalutValue的使用
以下页面中的文本框的值无论怎么改变,点击“原始值”按钮始终会得到初始页面的时候的值,即“ffffffffffffff” <!DOCTYPE html> <html> <h ...
- EXCEL 如何实现下拉填充公式,保持公式部分内容不变,使用绝对引用
EXCEL 如何实现下拉填充公式,保持公式部分内容不变,使用绝对引用 在不想变的单元格前加$符号(列标和列数,两个都要加$),变成绝对引用,默认情况是相对引用 L4固定不变的方式:$L$4 M4固定不 ...
- 流程控制语句(if switch)
一.if语句 if(条件){ 代码块1 } else if (条件2) { 代码块2 } else if (条件3) { 代码块3 else { 代码块4 } 当代码执行到这里的时候,先判断条件1的值 ...
- .NET Framework简介
NET Framework 就是微软Web Services 引擎1.NET Framework 旨在实现下列目标:提供一个一致的面向对象的编程环境,而无论对象代码是在本地存储和执行,还是在本地执行但 ...
- 【题解】Luogu P4069 [SDOI2016]游戏
原题传送门 看到这种题,想都不用想,先写一个树链剖分 然后发现修改操作增加的是等差数列,这使我们想到了李超线段树 先进性树剖,然后用李超线段树维护区间最小,这样就做完了(写码很容易出错) 复杂度为\( ...
- Android中粗字体
前言 最近UI大牛出了一版新的效果图,按照IOS的效果做的,页面里面有普通字体.中粗字体.加粗字体.对于IOS的小伙伴,分分钟搞定,但是对于Android开发的我,瞬间懵逼了.WTF! 安卓只有粗和不 ...
- Python线程模块threading
线程,程序执行的最小单元,单线程处理多个任务只能一个处理完后继续处理下一个直到全部处理完,多线程处理任务会比单线程处理起来快吗?在python程序里得看情况,首先有GIL锁的存在导致同一时刻只能有一个 ...