Vue Methods Option 方法选项

xml 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Methods Option</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue Methods Option</h1>
<hr>
<div id="app">
    {{message}}
    <p><button @click="add(5,$event)">add</button></p>
   <!--native调用原始事件-->
    <p><whl @click.native="add(5,$event)"></whl></p>
</div>
<button οnclick="app.add(9)">外部ADD</button>

</body>
</html>
<script>
    //声明一个组件
    var whl={
        template:`<button>组件ADD</button>`
    }
    var app = new Vue({
        el:'#app',
        data:{
            message:1
        },
        components:{
          'whl':whl
        },
        methods:{
            //event 参数  可以打印出来看看
            add:function(num,event){
               // console.log(event);
                if(num!=null){
                    this.message+=num
                }else{
                    this.message++
                }

            }
        }
    })
</script>
相关推荐
伍哥的传说4 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi9878386 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊18 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
埃菲尔铁塔_CV算法36 分钟前
基于 TOF 图像高频信息恢复 RGB 图像的原理、应用与实现
人工智能·深度学习·数码相机·算法·目标检测·计算机视觉
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿1 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉1 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽1 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课1 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript