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 ...
随机推荐
- eclipse中使用workset整理项目
eclipse项目过多怎么方便管理呢? 可以使用workset来进行管理.这里的workset跟.net 也就是visual studio中的项目解决方法类似,可以将项目.类库进行分开管理. 可以点击 ...
- Django的admin管理系统写入中文出错的解决方法/1267 Illegal mix of collations (latin1_swedish_ci,IMPLICIT) and (utf8_general_ci,COERCIBLE) for operation ‘locate’
Django的admin管理系统写入中文出错的解决方法 解决错误: 1267 Illegal mix of collations (latin1_swedish_ci,IMPLICIT) and ( ...
- css基础重点内容总结
一.目录引入 ./同级(当前) ../上级目录 ../../上上级目录 二.标签种类: 1.块级标签(block):独占一行,宽高可设: 2.行内块标签(inline-block):不独占一行,宽高 ...
- python交互的几种方式
# 第一种交互方式 name = input("name:")age = input("age:")job = input("job:")s ...
- go语言入门教程:基本语法—常量constant
一.常量的使用 1.1 常量声明 常量是一个简单值的标识符,在程序运行时,不会被修改的量. const identifier [type] = value 显式类型定义: const b string ...
- MySQL 压缩文件安装遇到的问题及解决方案
第一步:从官网下载压缩文件(链接). 第二步:解压该文件,放置到想放到的位置.我的目录是在 C:\mysql\mysql-8.0.12-winx64 下. 第三步:在C:\mysql\mysql-8. ...
- Django多表查询
一.前言 1.什么是ORM? ORM,即Object-Relational Mapping(对象关系映射),它的作用是在关系型数据库和业务实体对象之间作一个映射,这样,我们在具体的操作业务对象的时候, ...
- Python-王者荣耀自动刷金币+爬取英雄信息+图片
前提:本文主要功能是 1.用python代刷王者荣耀金币 2.爬取英雄信息 3.爬取王者荣耀图片之类的. (全部免费附加源代码) 思路:第一个功能是在基于去年自动刷跳一跳python代码上面弄的,思路 ...
- linux基础之加密解密、PKI及SSL、创建私有CA
加密解密基础 1. 对称加密: 加密和解密使用同一个密钥 常见的加密算法有:DES.3DES.AES.Blowfish.Twofish.IDEA.RC6.CAST5 特性: 1. 加密.解密使用同一个 ...
- BZOJ 4259 残缺的字符串
思路 同样是FFT进行字符串匹配 只不过两个都有通配符 匹配函数再乘一个\(A_i\)即可 代码 #include <cstdio> #include <algorithm> ...