老早就听说了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. 796. Rotate String

    class Solution { public: bool rotateString(string A, string B) { if(A.length()==B.length()&& ...

  2. php中如何解决显示数据库中的内容乱码

    第一步: 第二步:在代码开始处加一行

  3. (3)The critical role librarians play in the opioid crisis

    https://www.ted.com/talks/chera_kowalski_the_critical_role_librarians_play_in_the_opioid_crisis 00:1 ...

  4. 开机logo以及两种修改开机动画方法

    Android开机画面总共有三屏 一.第一屏:开机logo 1.选张png格式的图片,在Linux任意下执行(安装工具): sudo apt-get install pnmtoplainpm 2.在所 ...

  5. php 16进制颜色代码转换为rgba,rgb格式

    <?php $rgb = hex2rgba('#FFFFFF', false, true); echo 'rgb: '.$rgb[0].','; echo $rgb[1].','; echo $ ...

  6. html的那些小小细节

    1.get post方式提交的不同 get:数据放在url的后面,用?连接                        会在客户端保留缓存信息,不安全                        ...

  7. 记录：CSS特殊性——权值规则

    浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:r ...

  8. 实战--利用Lloyd算法进行酵母基因表达数据的聚类分析

    背景:酵母会在一定的时期发生diauxic shift,有一些基因的表达上升,有一些基因表达被抑制,通过聚类算法,将基因表达的变化模式聚成6类. ORF Name R1.Ratio R2.Ratio ...

  9. spring之hello(简单环境配置)

    导入java包 配置springmvc.xml文件 <?xml version="1.0" encoding="UTF-8"?> <beans ...

  10. mysql_变量

    set names gbk; 变量 变量分为两种:系统变量,自定义变量 系统变量:系统定义好的,大部分情况用户不需要使用系统变量,如autocommit,auto_increment_incremen ...