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 ...
随机推荐
- windows10安装ubuntu on windows10
安装向导 https://msdn.microsoft.com/en-us/commandline/wsl/install_guide
- git常规命令
$ mkdir filename 创建一个空目录 $ git init 把这个目录变成Git可以管理的仓库 $ pwd 用于显示当前目录 $ cat <file> 查看文件内容 $ git ...
- ACM-ICPC 2018 沈阳赛区网络预赛 B Call of Accepted(表达式求值）
题目链接:https://nanti.jisuanke.com/t/31443 相关前置链接 https://www.cnblogs.com/dolphin0520/p/3708602.html ht ...
- zip / unzip 的用法
zip 1.功能作用:压缩文件或者目录 2.位置:/usr/bin/zip 3.格式用法:zip [-options] [-b path] [-t mmddyyyy] [-n suffixes] [z ...
- gj13 asyncio并发编程
13.1 事件循环 asyncio 包含各种特定系统实现的模块化事件循环 传输和协议抽象 对TCP.UDP.SSL.子进程.延时调用以及其他的具体支持 模仿futures模块但适用于事件循环使用的Fu ...
- 第23章：MongoDB-聚合操作--聚合命令
①count() 范例:统计students表中的数据量 db.students.count(); 范例:模糊查询 db.students.count("name":/张/i); ...
- java 获取浏览器类型
public String getBrowserType(HttpServletRequest request) { String type = "ie"; S ...
- 自己写一个chrome扩展程序 - 右键菜单扩展
最近在学习Spring,心想dotnet如何实现类似形式呢.于是想认真学习Casetle组件,发现没有书籍!而spring的书多得很.于是只好找网上教程了.发现系统的文章不多.Terrylee好多文章 ...
- (转)PHP5使用cookie时报错 cannot modify header information - headers already sent by (......)
转自:http://blog.csdn.net/buyingfei8888/article/details/8899797 运行有警告Warning: Cannot modify header inf ...
- PAT甲级 1121. Damn Single (25)
1121. Damn Single (25) 时间限制 300 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue "Dam ...