zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    非旋Treap——fhq treap
    LCA
    树链剖分
    复习计划
    BZOJ2565: 最长双回文串(回文树)
    回文自动机
    luogu P3796 【模板】AC自动机(加强版)
    【BZOJ2908】 又是nand
    【HDU2460】 Network
    【CF786B】 Legacy
  • 原文地址:https://www.cnblogs.com/jf-67/p/8484012.html
Copyright © 2011-2022 走看看