Vue.js之下拉列表及选中触发事件
老早就听说了Vue.js是多么的简单、易学、好用等等，然而我只是粗略的看了下文档，简单的敲了几个例子，仅此而已。
最近由于项目的需要，系统的看了下文档，也学到了一些东西。
废话不多说，这里要说的是下拉列表以及选中某一选项触发选中事件。
1、下拉列表
（1）、html部分代码：
<div id="app">
<select v-model="selected">
<option>--请选择--</option>
<option v-for="item in optList">{{ item }}</option>
</select>
</div>
（2）、js部分代码：
new Vue({
el: '#app',
data: {
selected: '',
optList: ['青龙', '白虎', '朱雀', '玄武']
}
})
结果就是这样：
（2）、选中选项触发事件
这种情况下，可以使用change事件，当选中某一选项后，便会触发该事件。完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
</head>
<body>
<div id="app">
<select name="" id="" v-model="select2" @change='getValue'>
<option value="">--请选择--</option>
<option v-for='item in optionList'>{{ item }}</option>
</select>
</div>
<script>
new Vue({
el: '#app',
data: {
select2: '',
optionList: ['青龙', '白虎', '朱雀', '玄武']
},
methods: {
getValue: function(){
console.log('您选择了', this.select2)
}
}
})
</script>
</body>
</html>
Vue.js之下拉列表及选中触发事件的更多相关文章
- LayUI中select下拉框选中触发事件
代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...
- vue.js介绍，常用指令，事件，以及制作简易留言版
一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...
- js和jquery中的触发事件
改别人的坑,遇到jquery选择器和fireEvent混用,不认识fireEvent方法报错. js的方法不能使用jquery的选择器去调用. 1.fireEvent (IE上的js方法 ) 我们来看 ...
- 实现 select中指定option选中触发事件
我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...
- js中按下回车触发事件
方法一:document.onkeydown = function (e) { // 回车提交表单// 兼容FF和IE和Opera var theEvent = window.event || e; ...
- js获取下拉列表(select)选中项的值和文本
获取下拉列表选中项的值和文本(select) <html> <head> <meta charset="utf-8"/> <title&g ...
- js 动态加载select触发事件
动态加载select后,手动调用一下 subjectChange函数,模拟触发change事件 function hallidChange(value) { $.ajax({ type: " ...
- js 滚动条滚动到底部触发事件
一.前言 在开发项目时,常常需要展示大量数据.如果全部显示出来,数据相对少时,看不出来什么不同,如果数据很多时,一次请求全部显示,这就相当可怕了. 面对这种问题,PC里使用了分页效果,将数据分成一页页 ...
- vue.js下移动端绑定click事件失效，pc端正常的问题
原因可能是 我在项目中使用到了 better-scroll,默认它会阻止 touch 事件.所以在配置中需要加上 click: true 即可. 例如: mounted () { this.scrol ...
随机推荐
- 2018.11.09 洛谷P1110 [ZJOI2007]报表统计（multiset）
传送门 sb题. 直接用两个multisetmultisetmultiset维护相邻两个数的差值和所有数的前驱后继. 插入一个数的时候更新一下就行了. 代码: #include<bits/std ...
- springboot深入学习(四)-----tomcat配置、websocket
一.更改servlet服务器 springboot中默认可以集成多种servlet容器,当引入如下依赖时: springboot默认以tomcat作为项目的servlet容器,如果用户想要替换tomc ...
- WM_PAINT和WM_ERASEBKGND消息
1.OnPaint()函数是窗口重绘消息WM_PAINT的响应函数,当窗口重绘时会产生WM_ERASEBKGND消息和WM_PAINT消息,而且WM_ERASEBKGND会先于WM_PAINT产生,所 ...
- C++STL deque
deque双端数组 deque<int> dq; deque<int>::iterator it; dq.push_back();//尾部插入元素 dq.push_front( ...
- 腾讯云 centos 一键安装nginx环境
这里测试centos版本为7.4 进入命令行直接敲入一下代码 $ yum install nginx 根据提示 进行确认 下一步 即可安装完毕: 服务器默认根目录为 : /usr/share/ngin ...
- usb_ctrl
IFCLK应该是clkout,与数据同步 flagd就是就是slcs FPGA的系统时钟用FX2LP的clkout时钟,个人觉得关键点在时钟是48M,别的异步时钟也是可以的. 模式配置 使用的模式是从 ...
- 一个简单的MySQL多实例环境搭建
安装mysql 初始化两个数据库目录 mysql_install_db --datadir=/usr/local/var/mysql1 --user=mysql mysql_install_db -- ...
- Ng第四课：多变量线性回归(Linear Regression with Multiple Variables)
4.1 多维特征 4.2 多变量梯度下降 4.3 梯度下降法实践 1-特征缩放 4.4 梯度下降法实践 2-学习率 4.5 特征和多项式回归 4.6 正规方程 4.7 正规方程及不可逆性 ...
- (转)ASP.NET MVC 4 RC的JS/CSS打包压缩功能
转自:http://www.cnblogs.com/shanyou/archive/2012/06/22/2558580.html 打包(Bundling)及压缩(Minification)指的是将多 ...
- css,jQuery,js部分注释
注释:在开头加上<!--,以-->结尾 alt属性,也被称为alt text, 是当图片无法加载时显示的替代文本 action属性的值指定了表单提交到服务器的地址 除了分别指定元素的 pa ...