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>
相关推荐
萌萌哒草头将军3 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
小彭努力中4 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
JOYCE_Leo164 小时前
一文详解卷积神经网络中的卷积层和池化层原理 !!
人工智能·深度学习·cnn·卷积神经网络
浪裡遊4 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿4 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj4 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝4 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3115 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion5 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜5 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf