Vue.js之下拉列表及选中触发事件

　　老早就听说了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>

　　

 

posted @ 2018-02-28 15:44  江峰★  阅读(30333)  评论(0)  编辑  收藏  举报
∧