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>
相关推荐
疯狂的沙粒19 小时前
前端开发【工具函数】基于dayjs 封装的DateUtils工具函数,可以直接拿着使用
前端·javascript·vue.js·1024程序员节
学术头条19 小时前
用视觉压缩文本!清华、智谱推出Glyph框架:通过视觉-文本压缩扩展上下文窗口
人工智能·深度学习·计算机视觉
jingling55519 小时前
CSS进阶 | 不用一行JS!用纯CSS打造会动的现代化单页应用(3D翻转卡片)
前端·javascript·css
温宇飞20 小时前
浏览器路由系统的一种实践
前端
B站_计算机毕业设计之家20 小时前
基于python人脸识别系统 人脸检测 实时检测 深度学习 Dlib库 ResNet深度卷积神经网络 pyqt设计 大数据(源码)✅
python·深度学习·目标检测·计算机视觉·信息可视化·人脸识别·1024程序员节
老前端的功夫21 小时前
Vue 插槽深度解析:从基础到高级架构设计
前端
pre_lee21 小时前
vue2响应式原理
前端
小奶包他干奶奶21 小时前
如何使用vscode和express开发node.js
前端·node.js
庞囧21 小时前
通俗易懂讲 React 原理-第二集:Fiber
前端