老早就听说了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. 2018.11.18 spoj Triple Sums（容斥原理+fft）

    传送门 这次fftfftfft乱搞居然没有被卡常? 题目简述:给你nnn个数,每三个数ai,aj,ak(i<j<k)a_i,a_j,a_k(i<j<k)ai​,aj​,ak​( ...

  2. Java对象的克隆

    今天要介绍一个概念,对象的克隆.本篇有一定难度,请先做好心理准备.看不懂的话可以多看两遍,还是不懂的话,可以在下方留言,我会看情况进行修改和补充. 克隆,自然就是将对象重新复制一份,那为什么要用克隆呢 ...

  3. 应用整合CAS服务器方法

    概要 在开发WEB程序时需要整合CAS实现单点登录,下面介绍一下应用整合CAS服务器的过程. 在开始之前,我们确定CAS服务器已经搭建完毕. 实现步骤 1.新建一个maven项目,引入casclien ...

  4. springboot 容器启动事件

    在springboot 容器启动时,我们需要在启动过程中做一些操作,比如启动容器后,执行某些代码. spring 提供了监听器,我们可以方便的实现这些操作. 在容器启动开始时: package com ...

  5. maven的传递性依赖

    一.概念: 假如有maven项目A,项目A依赖项目B,项目B依赖项目C,我们说A对B是第一直接依赖,B对C是第二直接依赖,那么他们的依赖关系:A---->B----->C,那么我们执行项目 ...

  6. linux安装源码jdk

    第一步: 传输jdk到服务器上可以用xhsell,也可以用ftp 第二步:解压文件 tar -xzvf jdk-7u80-linux-x64.tar.gz 第三步:配置环境变量 输入即可 注意:修改J ...

  7. C#程序集问题：混合模式程序集是针对“v2.0.50727”版的运行时生成的.....

    今天在把以前写的代码生成工具从原来的.NET3.5升级到.NET4.0,同时准备进一步完善,将程序集都更新后,一运行程序在一处方法调用时报出了一个异常: 混合模式程序集是针对“v2.0.50727”版 ...

  8. 7-18 Hashing - Hard Version

    7-18 Hashing - Hard Version (30 分) Given a hash table of size N, we can define a hash function . Sup ...

  9. Ng第十二课：支持向量机(Support Vector Machines)（三）

    11 SMO优化算法(Sequential minimal optimization) SMO算法由Microsoft Research的John C. Platt在1998年提出,并成为最快的二次规 ...

  10. Alpha阶段敏捷冲刺（七）

    1.站立式会议 提供当天站立式会议照片一张 2.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 昨天已完成的工作. 祁泽文:用java完成了错词,已掌握,陌生单词的图标生 ...