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>
相关推荐
Wcowin3 分钟前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
伍哥的传说40 分钟前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4531 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself2431 小时前
想把一个easyui的表格<th>改成下拉怎么做
前端·深度学习·easyui
苹果醋31 小时前
iview中实现点击表格单元格完成编辑和查看(span和input切换)
运维·vue.js·spring boot·nginx·课程设计
武昌库里写JAVA1 小时前
iView Table组件二次封装
vue.js·spring boot·毕业设计·layui·课程设计
三口吃掉你1 小时前
Web服务器(Tomcat、项目部署)
服务器·前端·tomcat
Trust yourself2431 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
烛阴1 小时前
Tile Pattern
前端·webgl
Blossom.1181 小时前
基于深度学习的图像分类:使用DenseNet实现高效分类
人工智能·深度学习·目标检测·机器学习·分类·数据挖掘·迁移学习