vue之click事件绑定

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

可以用 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: "",
};
},

以上是 vue之click事件绑定 的全部内容， 来源链接： utcz.com/z/381006.html

回到顶部