vuejs 教程 指令 参数 动态参数代码,vuejs v-on 监听focus,onblur,oninput 多个方法案例;
缩写:<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />,案例中没有缩写,可以自行尝试;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"> <p v-if="seen">现在你看到我了</p> <p><a v-bind:href="url">url...</a></p> <p><a v-on:click="doSomething">Click Me!</a></p>//v-on:click 可简写如下 <p><a @click="doSomething">Click Me!</a></p> <p>{{ string }}</p> <p>//stop 修饰符阻止冒泡</p> <div @click="doSomethingTwo"> <div @click.stop="doSomethingOne"> Click Me ! </div> </div> <p>{{ stringOne }}</p> <p>{{ stringTwo }}</p> <p><a v-bind:[attributeName]="url"> ... </a></p> <p><a v-on:[eventName]="doSomethingThree"> Click Me! </a></p> <p>{{ stringThree }}</p> <p> <input type="text" :value="name" v-on:input="onInput" v-on:[eventFocus]="onFocus" v-on:blur="onBlur" /> </p> <p>{{ stringFocus }}</p> </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { seen: true, url: "http://www.dianthink.com", string: 'doSomething...', stringOne: 'doSomethingOne...', stringTwo: 'doSomethingTwo...', stringThree: 'doSomethingThree...', stringFocus: 'doFocusContent...', attributename: "href", eventname: 'click', name: '获得焦点...失去焦点...', eventfocus: 'focus', }, methods: { doSomething: function() { vm.string = vm.string + ' repeat doSomething...'; }, doSomethingOne: function() { vm.stringOne = vm.stringOne + ' repeat doSomethingOne...'; }, doSomethingTwo: function() { vm.stringTwo = vm.stringTwo + ' repeat doSomethingTwo...'; }, doSomethingThree: function() { vm.stringThree = vm.stringThree + ' repeat doSomethingThree...'; }, onFocus: function() { vm.stringFocus = vm.stringFocus + ' repeat doFocus...'; }, onInput: function() { vm.stringFocus = vm.stringFocus + ' repeat doFocus...'; }, onBlur: function() { vm.stringFocus = vm.stringFocus + ' repeat doFocus...'; } } }) </script> </body> </html>
发表评论 取消回复