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 ...
随机推荐
- Python学习笔记(Ⅰ)——Python程序结构与基础语法
作为微软的粉丝,最后终于向Python低头了,拖了两三个月终于下定决心学习Python了.不过由于之前受到C/C#等语言影响的思维定式,前期有些东西理解起来还是很费了些功夫的. 零.先抄书: 1.Py ...
- SSH整合时多表关联查询出现Javassist增强失败
Customer类对应的表为另一个表LinkMan的外键,在进行LinkMan表操作时,出现如下错误. 遇到Javassist增强失败网上说法不一,有的说Customer没有无参构造方法,javass ...
- SQL中sysname数据类型的含义(转)
sysname SQL Server 实例包括用户定义的名为 sysname 的数据类型.sysname 用于表列.变量以及用于存储对象名的存储过程参数.sysname 的精确定义与标识符规则相关:因 ...
- vue图片onerror加载路径写法
vue里,img加载错误的时候,onerror属性可以加载错误图片的默认图片写法如下: <img class=avator' :src="data.picture" :one ...
- 什么是Referer?Referer的作用?空Referer是怎么回事?
什么是Referer? Referer是 HTTP请求header 的一部分,当浏览器(或者模拟浏览器行为)向web 服务器发送请求的时候,头信息里有包含 Referer.比如我在www.sojson ...
- BindingResult 作用原理
controller代码 @RequestMapping("") public String index(@Valid User user , BindingResult bind ...
- Linux下使用acme.sh 配置https 免费证书
acme.sh 简单来说acme.sh 实现了 acme 协议, 可以从 let‘s encrypt 生成免费的证书.acme.sh 有以下特点:一个纯粹用Shell(Unix shell)语言编写的 ...
- xampp——apache服务启动问题(端口占用)
Apache启动提示 20:39:02 [Apache] Error: Apache shutdown unexpectedly.20:39:02 [Apache] This may be due t ...
- python实现单例模式的三种方式及相关知识解释
python实现单例模式的三种方式及相关知识解释 模块模式 装饰器模式 父类重写new继承 单例模式作为最常用的设计模式,在面试中很可能遇到要求手写.从最近的学习python的经验而言,singlet ...
- JAVA随笔----浅谈lombok注解
在Java开发中,注解可谓是帮了大忙.注解的使用帮助我们简化了代码,让代码更加简洁.今天就来谈谈常用的Lombok注解. lombok注解文档 lombok官方下载地址 先看一下lombok支持的一些 ...