标签:sub cte radio fun text eth checked 单选框 负载
使用v-on绑定事件 <button @click="hello">Hello</button><br /> <button @click="say(‘I love you‘)">say</button><br /> 访问原生事件 <button @click="do(‘Nihao‘,$event)">do</button><br /> 事件修饰符<br /> <form v-on:submit.prevent="onSubmit" action="http://www.baidu.com"> <a @click.stop="doThis">阻止单击事件冒泡</a> <input type="submit" value="提交事件不再负载页面" /> <input v-on:keyup.enter="submit" type="submit" value="只有在keyup等于enter才提交"> </form> <br /><br /> 表单控件绑定: 使用V-model进行双向绑定,处理一些极端的需求,如下: <span>Message is:{{message}}</span><br /> <input type="text" v-model="message" placeholder="Edit me" /><br /><br /><br /> 单个多选框:逻辑值 <input type="checkbox" id="checkbox" v-model="checked" value="游泳"/>游泳? <label for="checkbox">{{checked}}</label> <br /><br /><br /><br /> 绑定到数组:不是逻辑值,是value的值 <input type="checkbox" value="A" v-model="model" id="A" /> <label for="A">A</label> <input type="checkbox" value="B" v-model="model" id="B" /> <label for="B">B</label> <input type="checkbox" value="C" v-model="model" id="C" /> <label for="C">C</label><br /> <span>selcted:{{model | json}}</span> 单选框:<br /> <input type="radio" value="男" v-model="sex" />男 <input type="radio" value="女" v-model="sex" />女 <br /><span>{{sex}}</span> 下拉框:<br /> <select v-model="selected" multiple> <option selected>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected | json }}</span> <!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model="msg" lazy><span>{{msg}}</span><br /><br /> <input v-model="age" number><span>{{age}}</span>
var vm=new Vue({ el:‘#app‘, data:{ text:‘Hello‘, model:[] }, methods:{ hello:function(){ alert(this.text+" Vue.js"); }, say:function(text){ alert(‘say‘+text); }, do:function(text,event){ alert(text); event.preventDefault(); } } });
标签:sub cte radio fun text eth checked 单选框 负载
原文地址:http://www.cnblogs.com/wuheng1991/p/7576096.html