(简)vue的methods（方法）+watch（监听属性）

2024-01-31 16:40| 来源: 网络整理| 查看: 265

文章目录 methods（方法）基本用法methods中的$event参数 watch（监听属性）监听数据实例：

methods（方法）基本用法

1.监听一个按钮的点击事件，设值一个计数器，每次点击都加1：

点击次数：{{counter}} +1 new Vue({ el:'#app', data: { counter:0 }, methods: { }, })

运行结果：在这里插入图片描述 2.@click的表达式可以直接使用JavaScript语句，也可是一个在Vue实例中methods选项内的函数名，比如对上例进行扩展，在增加一个按钮，点击一次，计算器加10：

点击次数：{{counter}} +1 +10 new Vue({ el:'#app', data: { counter:0 }, methods: { handleAdd:function(count){ count=count||1; this.counter+=count; } }, })

运行结果：在这里插入图片描述在methods中定义了我们需要的方法供@click调用，许注意，@click调用方法后可不跟括号‘（）’。

methods中的$event参数

Vue提供了一个特殊变量$event,用于访问原生DOM事件，例如下面的实例可以组装链接打开：

打开链接 new Vue({ el:'#app', methods: { handleClick:function(message,event){ event.preventDefault(); window.alert(message); } }, })

运行结果：在这里插入图片描述

watch（监听属性）监听数据实例： {{msg}} {{msgData}} new Vue({ el:'#app', data: { msg:'abc', msgData:'' }, watch:{ msg:function(val){ this.msgData=val; } } })

运行结果：在这里插入图片描述

【本文地址】

今日新闻