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>
相关推荐
王哥儿聊AI23 分钟前
告别人工出题!PromptCoT 2.0 让大模型自己造训练难题,7B 模型仅用合成数据碾压人工数据集效果!
人工智能·深度学习·算法·机器学习·软件工程
拉姆哥的小屋26 分钟前
基于提示学习的多模态情感分析系统:从MULT到PromptModel的华丽升级
python·深度学习·学习
yourkin66633 分钟前
人工智能 (AI) > 机器学习 (ML) > 深度学习 (DL)
人工智能·深度学习·机器学习
蒋星熠1 小时前
爬虫与自动化技术深度解析:从数据采集到智能运维的完整实战指南
运维·人工智能·爬虫·python·深度学习·机器学习·自动化
北城以北88881 小时前
Vue--Vue基础(二)
前端·javascript·vue.js
ObjectX前端实验室1 小时前
【react18原理探究实践】更新调度的完整流程
前端·react.js
机器学习之心2 小时前
198种组合算法+优化BiGRU双向门控循环单元+SHAP分析+新数据预测+多输出!深度学习可解释分析,强烈安利,粉丝必备!
深度学习·算法·shap分析·新数据预测·优化bigru
tanxiaomi2 小时前
通过HTML演示JVM的垃圾回收-新生代与老年代
前端·jvm·html
palpitation972 小时前
Android App Links 配置
前端
AI人工智能+3 小时前
表格识别技术:突破传统OCR的局限,通过定位-解析-重建三步策略攻克无边框、合并单元格等视觉难题
人工智能·深度学习·ocr·表格识别