老早就听说了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之下拉列表及选中触发事件的更多相关文章

  1. LayUI中select下拉框选中触发事件

    代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...

  2. vue.js介绍，常用指令，事件，以及制作简易留言版

    一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...

  3. js和jquery中的触发事件

    改别人的坑,遇到jquery选择器和fireEvent混用,不认识fireEvent方法报错. js的方法不能使用jquery的选择器去调用. 1.fireEvent (IE上的js方法 ) 我们来看 ...

  4. 实现 select中指定option选中触发事件

    我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...

  5. js中按下回车触发事件

    方法一:document.onkeydown = function (e) { // 回车提交表单// 兼容FF和IE和Opera var theEvent = window.event || e; ...

  6. js获取下拉列表(select)选中项的值和文本

    获取下拉列表选中项的值和文本(select) <html> <head> <meta charset="utf-8"/> <title&g ...

  7. js 动态加载select触发事件

    动态加载select后,手动调用一下 subjectChange函数,模拟触发change事件 function hallidChange(value) { $.ajax({ type: " ...

  8. js 滚动条滚动到底部触发事件

    一.前言 在开发项目时,常常需要展示大量数据.如果全部显示出来,数据相对少时,看不出来什么不同,如果数据很多时,一次请求全部显示,这就相当可怕了. 面对这种问题,PC里使用了分页效果,将数据分成一页页 ...

  9. vue.js下移动端绑定click事件失效，pc端正常的问题

    原因可能是 我在项目中使用到了 better-scroll,默认它会阻止 touch 事件.所以在配置中需要加上 click: true 即可. 例如: mounted () { this.scrol ...

随机推荐

  1. kbmMW均衡负载与容灾(1)（转载红鱼儿）

    kbmMW为均衡负载与容灾提供了很好的机制,支持多种实现方式,现在看看最简单的一种,客户端控制的容灾和简单的负载均衡. 现在,我们将kbmMWServer部署到不同的服务器,或者在同一服务器部署多份实 ...

  2. mysql之索引查询1

    一 备份数据 备份库: mysqldump:拷贝数据 --database:数据库 基本语法是:mysqldump -h服务器名 -u用户名 -p密码 --database 库名 > 备份路径. ...

  3. Python开课复习-10/10

    1. 什么时匿名函数def 定义 的是有名函数:特点是可以通过名字重复调用 def func(): #func = 函数的内存地址 pass匿名函数就是没有名字的函数:特点是只能在定义时使用一次 2. ...

  4. 通俗理解 CPU && GPU

    CPU 力气大啥P事都能干,还要协调.GPU 上面那家伙的小弟,老大让他处理图形,这方面处理简单,但是量大,老大虽然能处理,可是老大只有那么几个兄弟,所以不如交给小弟处理了,小弟兄弟多,有数百至数千个 ...

  5. vue 开发系列（五） 调用原生API

    概要 我们在开发手机端程序的时候了,我们经常需要使用到拍照,二维码的功能.数字天堂公司提供了大量的原生API支持. http://www.html5plus.org/doc/ 实现 1.在hbuild ...

  6. Keepalived+Nginx高可用架构配置

    1.yum install -y libnfnetlink-devel2.yum -y install libnl libnl-devel 3.yum -y install openssl-devel ...

  7. java web 怎么下载大文件(上百M)

    Java代码   ; ]; , )) != -) { , bytesRead); 13.               } 14.               toClient.write(buffer ...

  8. word粘贴图片+的editor

    公司做的项目需要用到文本上传功能. Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本 ...

  9. 20171123IdleHandler

    在Android中,我们可以处理Message,这个Message我们可以立即执行也可以delay 一定时间执行.Handler线程在执行完所有的Message消息,它会wait,进行阻塞,知道有心的 ...

  10. spark 中划分stage的思路

    窄依赖指父RDD的每一个分区最多被一个子RDD的分区所用,表现为 一个父RDD的分区对应于一个子RDD的分区 两个父RDD的分区对应于一个子RDD 的分区. 宽依赖指子RDD的每个分区都要依赖于父RD ...