<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. [virtualbox] win10与centos共享目录下,nginx访问问题

    原文,http://blog.csdn.net/zhezhebie/article/details/73554872 virtualbox自动挂载之后,默认是挂载在/media/sf_WWW下面的: ...

  2. DotNetty网络通信框架学习

    p{ text-align:center; } blockquote > p > span{ text-align:center; font-size: 18px; color: #ff0 ...

  3. PIL模块

    处理图片的模块 打开图片 im=Image.open("1.png") 创建字体对象 先要字体文件 font = ImageFont.truetype('C:\\WINDOWS\\ ...

  4. WPF Combobox数据绑定 Binding

    combobox数据绑定List链表集合区分显示值与选择的值 整体效果: 根据combobox选择情况分别打印选取值与显示值 代码: Windows窗体: <Window x:Class=&qu ...

  5. ssh很慢的问题转子

    根据网上的解决办法解决了,记录一下: 问题:ssh  ***@192.*.*.*  ,然后就一直卡在这个地方,很久以后才会出现让输入密码的提示 解决办法:1.关闭防火墙--chkconfig ipta ...

  6. AI时代学习新的技术,方向为计算机视觉--欢迎来我的简书blog拔草

    2017-09-01 19:29:33 简书blog: https://www.jianshu.com/u/973c8c406de7

  7. C++ this指针的详解

    C++中this指针的用法详解   转自:http://blog.chinaunix.net/uid-21411227-id-1826942.html 1. this指针的用处: 一个对象的this指 ...

  8. Yii2 mysql查询 int自动变string解决办法

    原因是PDO以string查询数据导致. 这个与YII没关系,是PDO的默认处理,解决方法只需在配置中的db配置中加上attributes的相关配置就行了,如下: 'components' => ...

  9. CentOS 7 yum install cobbler2.8.3

    安装前注意事项: 1.cobbler主机要为静态ip,否则和dhcpd服务冲突. 2.如果用虚拟机安装,client的内存请设置为2g以上,否则会报错. 3.kickstart文件中不要出现中文,大坑 ...

  10. oracle SQL性能分析之10053事件

    优化器生成正确执行计划的前提条件是要有正确的统计信息,不准确的统计信息往往会导致错误的执行计划.当通过SQL和基数推断出的执行计划和实际执行计划不同时,就可以借助10053事件.10053事件是用来诊 ...