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>
点赞(10) 打赏

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部