Vue绑定事件

<!-- 方法处理器 -->

<button v-on:click="doThis"></button>

<!-- 内联语句 -->

<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->

<button @click="doThis"></button>

<!-- 停止冒泡 -->

<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->

<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->

<form @submit.prevent></form>

<!--  串联修饰符 -->

<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->

<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->

<input @keyup.13="onEnter">

应用实例html

<div id="content_area" class="aui-content aui-margin-b-15 mid">

    <ul class="aui-list aui-list-in">

        <li class="aui-list-header aui-text-center" style="background: #fff;padding: 1rem 0;">

            <h1 class="color_organ aui-padded-b-10" style="font-size: 2rem;"><span v-cloak>{{DiamondAmount}}钻</span></h1>

            <h3>账户余额</h3>

        </li>

        <li class="aui-list-item">

            <div class="aui-list-item-inner">

                <div class="aui-list-item-title"><img style="height:0.8rem;margin-left: 0.5rem;" src="../image/zb_zs.png">10

                    <!--<span class="color_organ aui-font-size-12">+7钻石（首充奖励）</span>-->

                </div>

                <div class="aui-list-item-right" v-on:click="buy('10');">

                    <div class="aui-label aui-label-danger aui-label-outlined">￥ 1</div>

                </div>

            </div>

        </li>

        <li class="aui-list-item">

            <div class="aui-list-item-inner">

                <div class="aui-list-item-title"><img style="height:0.8rem;margin-left: 0.5rem;" src="../image/zb_zs.png">60</div>

                <div class="aui-list-item-right" v-on:click="buy('60');">

                    <div class="aui-label aui-label-danger aui-label-outlined">￥ 6</div>

                </div>

            </div>

        </li>

        <li class="aui-list-item">

            <div class="aui-list-item-inner">

                <div class="aui-list-item-title"><img style="height:0.8rem;margin-left: 0.5rem;" src="../image/zb_zs.png">300</div>

                <div class="aui-list-item-right" v-on:click="buy('300');">

                    <div class="aui-label aui-label-danger aui-label-outlined">￥ 30</div>

                </div>

            </div>

        </li>

        <li class="aui-list-item">

            <div class="aui-list-item-inner">

                <div class="aui-list-item-title"><img style="height:0.8rem;margin-left: 0.5rem;" src="../image/zb_zs.png">980</div>

                <div class="aui-list-item-right" v-on:click="buy('980');">

                    <div class="aui-label aui-label-danger aui-label-outlined">￥ 98</div>

                </div>

            </div>

        </li>

    </ul>

</div>

var vm = new Vue({

    el: '#content_area',

    data: data,

    methods: {

        buy : function (count) {

            alert(count);

        }

    }

});

注意这里要用methods，不要忘记了s。

巴特西

Vue绑定事件

最新文章

热门文章