select 列表实例：

new Vue({
    el: '#app',
    data: {
        optionsList:[{
            key:'选择',
            value:'Select'
            },{
            key:'淘宝',
            value:'taobao'
            },{
            key:'京东',
            value:'jingd'
            },{
            key:'阿里巴巴',
            value:'alibaba'
            },{
            key:'亚马逊',
            value:'amazon'
            },{
            key:'苏宁',
            value:'suning'
            },{
            key:'拼多多',
            value:'pinduoduo'
        }],
        selected: 'Select'
    }
})

尝试一下 »

相思

唐代：王维

红豆生南国，春来发几枝。

愿君多采撷，此物最相思。

补充下楼上的笔记

• .stop：就是js中的event.stopPropagation()的缩写,它是用来阻止冒泡的；
• .prevent：就是js中event.preventDefault()的缩写,它是用来阻止默认行为的；
• .capture：捕获事件和冒泡事件(默认)是两种事件流,事件捕获是从document到触发事件的那个元素;冒泡事件是从下向上的触发事件；
• .self：就是防止父元素（设置了该修饰符）的子元素的事件冒泡到父元素上，只有本身触发时才会执行事件处理程序（函数）；
• once：每次页面重载后只会执行一次。

如有错误，多多指正。

关于事件修饰符描述的比较少，我自己的理解记录一下:

• .stop: 不会一直传递，自己运行结束就结束了。
• .prevent: 比如 submit 加了这个，就不会提交了。
• .capture: 在传递的父子事件种，加了这个，无论先点哪个，都先执行这个。
• .self: 只有点击自己本身才会执行，点他的子元素也不会被传递。
• .once: 只执行一次。

<div id="app">
  <div v-on:click.capture="say('hi')">Say hi
    <div v-on:click="say('what')">Say what</div>
  </div>
</div>

尝试一下 »

<div id="app">
<input type="button"
    value="单击后增加"
    @click="m +=1"
    >

<input type="button"
    value="绑定函数的按钮"
    @click="add"
    >

<input type="button"
    value="绑定可传值函数的按钮"
    @click="add2(3,4)"
    >

<div>这个按钮被点击了 {{ m }} 。</div>
</div>

尝试一下 »