vue下拉框值改变事件_Vue.js之下拉列表及选中触发事件

老早就听说了Vue.js是多么的简单、易学、好用等等，然而我只是粗略的看了下文档，简单的敲了几个例子，仅此而已。

最近由于项目的需要，系统的看了下文档，也学到了一些东西。

废话不多说，这里要说的是下拉列表以及选中某一选项触发选中事件。

1、下拉列表

(1)、html部分代码：

--请选择--

{{ item }}

(2)、js部分代码：

new Vue({

el: '#app',

data: {

selected: '',

optList: ['青龙', '白虎', '朱雀', '玄武']

}

})

结果就是这样：

(2)、选中选项触发事件

这种情况下，可以使用change事件，当选中某一选项后，便会触发该事件。完整代码：

Document

--请选择--

{{ item }}

new Vue({

el: '#app',

data: {

select2: '',

optionList: ['青龙', '白虎', '朱雀', '玄武']

},

methods: {

getValue: function(){

console.log('您选择了', this.select2)

}

}

})