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.24 poj3415Common Substrings（后缀数组+单调栈）
传送门 常数实在压不下来(蒟蒻开O(3)都过不了). 但有正确性233. 首先肯定得把两个字符串接在一起. 相当于heightheightheight数组被height<kheight<k ...
- Servlet WebSocket的简易聊天室
添加依赖 <!-- websocket --> <dependency> <groupId>javax.websocket</groupId> < ...
- __getitem__()、__setitem__()与__delitem__()
# 如果想要运用[]取值,可以实现__getitem__() # 想要运用[]设值,可以实现__setitem__() # 若想通过del与[]来删除,可以实现__delitem__() class ...
- orika实现对象复制
1.新建maven工程orika-demo,引入orika依赖,其中pom.xml如下 <?xml version="1.0" encoding="UTF-8&qu ...
- Java获取文件后缀名
int dot = filename.lastIndexOf('.'); if ((dot > -1) && (dot < (licenceImg.getOriginalF ...
- Zookeeper C++编程实战之主备切换
默认zookeeper日志输出到stderr,可以调用zoo_set_log_stream(FILE*)设置输出到文件中还可以调用zoo_set_debug_level(ZooLogLevel)控制日 ...
- ibatis.net之我的调整：Update语句的动态set字段
动态Update语句 如果Map中指定多个字段 <update id="UpdateStaff"> update Staff set Name=#Name#,InDat ...
- java基础-day30
第07天 MySQL数据库 今日内容介绍 u 多表关系实战练习 u 多表查询 u SQL语句的练习 第1章 多表关系实战练习 1.1 多表关系--实战1--省和市 1.1.1 需求分析 在数据库 ...
- PAT甲级 1125. Chain the Ropes (25)
1125. Chain the Ropes (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Given ...
- 第78讲：Type与Class实战详解
今天来学习下type与class解析 让我们先来看看代码 import scala.reflect.runtime.universe._ class Sparktrait Hadoopobject F ...