老早就听说了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. P3834 【模板】可持久化线段树 1（主席树）

    #include <bits/stdc++.h> #define read read() #define up(i,l,r) for(int i = (l);i <= (r);i++ ...

  2. 2019.01.21 NOIP训练 可持久化序列【模板】（可持久化treap）

    传送门 题意简述:支持在把某个数插入到某版本的第k个位置,删除某版本第k个数,询问第k个数. 思路:用可持久化treaptreaptreap维护区间第kkk个位置的数是啥就可以了. 代码

  3. 2018.12.14 codeforces 932E. Team Work（组合数学）

    传送门 组合数学套路题. 要求ans=∑i=0nCni∗ik,n≤1e9,k≤5000ans=\sum_{i=0}^n C_n^i*i^k,n\le 1e9,k\le 5000ans=∑i=0n​Cn ...

  4. IPython:一种交互式计算和开发环境

    IPython基础 可以通过命令行启动IPython,执行任何Python语句,只需将其输入然后回车. Tab键自动完成 在Shell中输入表达式时,只要按下Tab键,当前命名空间中任何与已输入的字符 ...

  5. elasticsearch中文发行版 安装

    参见: https://github.com/medcl/elasticsearch-rtf 具体步骤参见:ubuntu安装elasticsearch-rtf elasticsearch-head 安 ...

  6. springboot+mysql实现quartz集群搭建

    一.基本概念 Quartz核心的概念:scheduler任务调度.Job任务.Trigger触发器.JobDetail任务细节. scheduler任务调度: 是最核心的概念,需要把JobDetail ...

  7. s4-介质访问控制子层-1 MAC子层

    数据链路层被分成了两个子层:MAC和LLC MAC子层要解决什么问题? 介质访问控制(Madia Access Control) 数据通信方式 单播(unicast):One - to - One ...

  8. FastDFS与springBoot集成

    参考博客http://blog.csdn.net/xyang81/article/details/52850667 tobato在今年9月份在官方Java客户端的基础上进行了大量重构,且提供了更多丰富 ...

  9. linux上搭建redis

    环境centos7及redis-4.0.2.tar.gz 第一步首先在/usr/local/mypackage下mkdir redis 通过工具上传redis安装包 解压安装包 tar -zxvf r ...

  10. SSM_CRUD新手练习（1）创建项目

    最近看了SSM框架,网上找了个入门视频的比较简单的小项目熟悉一下框架.现在把整个过程记录下来. 1.创建Maven工程,注意我们选择的是simple project就够了. 这样我们的Maven项目就 ...