老早就听说了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. php 制作验证码不显示的问题

    php制作验证码的代码,这里就不多说了,网上有很多的,这里说一些可能遇到的问题. 1. 首先是检查自己的php.ini文件,是否支持gd库. 2.保证代码没有出问题. 3.检查字体文件路径是否正确. ...

  2. 2019.01.14 bzoj2648: SJY摆棋子（kd-tree）

    传送门 kd−treekd-treekd−tree模板题. 题意简述:支持在平面上插入一个点,求对于一个点的最近点对. 思路:cdqcdqcdq是一种很不错的分治方法 只是好像码量有点窒息 所以我用了 ...

  3. mysql 外键理解

    假定一个班级的学生个人信息表: 什么是外键 在设计的时候,就给表1加入一个外键,这个外键就是表2中的学号字段,那么这样表1就是主表,表2就是子表.(注意: 外键不一定须要作为从表的主键.外键也不一定是 ...

  4. C语言编程题

    1.将整形a的第m位赋值到整形b的第n位 int fun4(int a, int m, int b, int n) { a = (a>>m) & ;//将a的第m位取出,为1或0, ...

  5. 关于xftp上传文件状态错误的解决

    新建一个文件夹,/usr/local/wwj 更改wwj权限 chmod 777 wwj 然后就可以上传了 如果还不行,就关闭防火墙

  6. Nodejs入门【转载】保留备用

    关于 本书致力于教会你如何用Node.js来开发应用,过程中会传授你所有所需的“高级”JavaScript知识.本书绝不是一本“Hello World”的教程. 状态 你正在阅读的已经是本书的最终版. ...

  7. Android: Custom View和include标签的区别

    Custom View, 使用的时候是这样的: <com.example.home.alltest.view.MyCustomView android:id="@+id/customV ...

  8. _编程语言_C++_Lambda函数与表达式

    C++11提供了对匿名函数的支持,称为Lambda表达式函数 Lambda 表达式把函数看作对象.Lambda 表达式可以像对象一样使用,比如可以将它们赋给变量和作为参数传递,还可以像函数一样对其求值 ...

  9. （暴力 记录）Camellia的难题 -- zzuli -- 1784

    http://acm.zzuli.edu.cn/problem.php?id=1784 Camellia的难题 Time Limit: 2 Sec  Memory Limit: 128 MBSubmi ...

  10. 20155326 第十周课下作业-IPC

    20155326 第十周课下作业-IPC 学习题目: 研究Linux下IPC机制:原理,优缺点,每种机制至少给一个示例,提交研究博客的链接 共享内存 管道 FIFO 信号 消息队列 学习过程 -IPC ...