<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>绑定事件的更多相关文章

  1. vue中组件绑定事件时是否加.native

    组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- < ...

  2. vue中select设置默认选中

    vue中select设置默认选中 一.总结 一句话总结: 通过v-model来:select上v-model的值为option默认选中的那项的值(value) 二.select设置默认选中实例 < ...

  3. jquery-10 jquery中的绑定事件和解绑事件的方法是什么

    jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...

  4. jquery中on绑定事件

    之前项目中动态创建的标签元素  在绑定事件的时候  都是无效  无论如何都不能触发 eg:在页面加载完成之后   再由脚本动态创建的<div>元素  在绑定事件的时候 例如click事件 ...

  5. jquery appaend元素中id绑定事件失效问题

    1. 在jquery中append元素,如果该元素中有id值并且绑定事件,那么该id事件会失效,必须刷新一下才能使用. 2.解决办法: 举例:如果在一个<div class="titl ...

  6. 记一笔vue中的中央事件总线的问题,以及解决方案

    代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bu ...

  7. Jquery中on绑定事件 点击一次 执行多次 的解决办法

    举个例子,在同一个页面有下拉选择框 <select class="mySelect"> <option value="user">按用户 ...

  8. vue中bus.$on事件被多次绑定

    问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发 解决办法一:在每次调用方法前先解绑事件( bus.$off ),然后在重新绑定( bus.$on ) b ...

  9. vue中把一个事件绑定到子组件上

    官网上是这样描述的 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件.这时,你可以使用 v-on的 .native 修饰符 父组件App.vue <template> <d ...

随机推荐

  1. Python语言——基础01-环境安装、注释、变量

    开篇导言: 今天开始进行python学习的笔记更新,以后我都用截图的方式更新,方便不麻烦,界面美观,今天学习更新的python学习内容是环境安装.注释.变量的内容 关注我博客的童鞋从现在开始也可以跟着 ...

  2. Laravel 安全:避免 SQL 注入

    当你使用 Eloquent 查询时,如: User::where('name', $input_name)->first(); Eloquent 内部使用的是 PDO 参数绑定,所以你的请求是安 ...

  3. node多人聊天室搭建

    1.采用websocket: 为什么不用ajax的http:在用HTTP发送消息时,必须用一个新的TCP/IP连接.打开和关闭连接需要时间.此 外,因为每次请求都要发送HTTP头,所以传输的数据量也比 ...

  4. RTSP-RTMP-HLS媒体播放管理

    近在跟一些做安防行业同学交流中发现,他们对于外网中播放各类视频流觉得各种设置麻烦的很, 好吧,小小的做了一个解决方案. 这个工具从视频监控管理平台剥离出来, 支持对rtsp, rtmp, hls流的管 ...

  5. Cron表达式解析

    每一个域可出现的字符如下:Seconds:          可出现     ", - * /"     四个字符,有效范围为0-59的整数Minutes:          可出 ...

  6. redis 在 php 中的应用(List篇)

    本文为我阅读了 redis参考手册 之后编写,注意 php_redis 和 redis-cli 的区别(主要是返回值类型和参数用法) 目录: List(列表) LPUSH LPUSHX RPUSH R ...

  7. kubernetes 开发 code-generator

    主要参考项目 https://github.com/kubernetes/code-generator 1. git clone https://github.com/kubernetes/code- ...

  8. [dart学习]第二篇:dart变量介绍 (一)

    前言 本文的所有内容均是官方文档的简单翻译和理解,需要查看原文,请登录  https://www.dartlang.org/guides/language/language-tour  阅读, 让我们 ...

  9. Python爬虫与一汽项目【一】爬取中海油,邮政,国家电网问题总结

    项目介绍 中国海洋石油是爬取的第一个企业,之后依次爬取了,国家电网,中国邮政,这三家公司的源码并没有多大难度, 采购信息地址: 国家电网电子商务平台 http://ecp.sgcc.com.cn/pr ...

  10. 程序员 面试题【前端,java,php】

    跬步客 网址:https://www.kuibuke.com/wall/index