zoukankan      html  css  js  c++  java
  • v-on的示例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="btn">
            <!-- 点击事件触发单个js表达式 -->
            <button v-on:click="count+=1" >点击</button>
            <p>点击次数{{count}}</p>
            <!-- 无参函数 -->
            <button v-on:click="submit">提交</button>
            <!-- 传参函数 -->
            <button v-on:click="transform('abc',$event)">传值</button>
            <!-- 绑定双击事件 -->
            <button v-on:dblclick="run">双击</button>
        </div>
        <script>
            var vm=new Vue({
                el:'#btn',
                data:{
                    count:0
                },
                methods:{
                 submit: function(){
                     alert(this.count);
                 },
                 transform:function(str,s){
                     console.log(s);
                     alert(str)
                 },
                 run:function(){
                     alert("双击");
                 }
                }
            });
        </script>
    </body>
    </html>
  • 相关阅读:
    前端性能优化-全链路质量监控体系建设
    前端性能优化-研发开发流程优化
    一次VLAN标签引发的网络事件的处置
    2001
    SpringBoot定时任务
    在el-dialog中使用ref找不到元素?
    el-table使用checkbox时,获取选中数据的id?
    SpringBoot邮件发送
    表单中el-select和el-input的长度不一致?
    element-ui如何修改el-dialog的样式?
  • 原文地址:https://www.cnblogs.com/kukai/p/12383887.html
Copyright © 2011-2022 走看看