vue之click事件绑定

可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。通常来讲就是监听dom触发一些操作,这些操作(比如点击)触发后执行的动作(js)可直接写在后面。

注意:所有的v-on都可以简写为@

1.@click不光可以绑定方法,也可以就地修改data里的数据

代码示例代码如下:

v-on:click="item+=1"

 

复制代码
<template>
  <div >
   <input type="button" value="clickme" v-on:click="item+=1"/>
    <div>{{item}}</div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    item:1
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>
复制代码

 

2.@click绑定多个操作的时候用;隔开

代码示例代码如下:

复制代码
<el-table>
<
el-table-column fixed="right" label="操作" width="120"> <template slot-scope="scope"> <el-button @click="dialogFormVisible1 = true;row=scope.$index;onejilu=scope.row" type="text" size="small" >移除</el-button> </template> </el-table-column>
</el-table>
data() { return { dialogFormVisible1: false, row: "", onejilu: "", }; },
复制代码

 

posted @   研发之心  阅读(20839)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示