• 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>
    

      

  • 相关阅读:
    根据View找控制器
    ScrollView双击图片定点放大
    iOS消息推送原理和实现总结
    iOS完整学习路线图
    获取设备版本
    UIView与CALayer的区别,很详细
    iOS开发网络数据之AFNetworking使用
    (已实践)PLSQL本地还原Oracle数据库dmp文件
    所遇Oracle错误代码
    Dapper基本使用
  • 原文地址:https://www.cnblogs.com/jf-67/p/8484012.html
Copyright © 2020-2023  润新知