随笔- 137 文章- 0 评论- 34 阅读- 97万

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

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

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

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

　　1、下拉列表

　　（1）、html部分代码：

<div id="app"><br>　　<select v-model="selected">
    　　<option>--请选择--</option>
    　　<option v-for="item in optList">{{ item }}</option>
　　</select><br></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>