vue v-on 监听多个方法

最新推荐文章于 2024-02-08 11:23:05 发布

了优刘_

最新推荐文章于 2024-02-08 11:23:05 发布

阅读量211

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lgg1997/article/details/125137322

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

`v-on` 监听多个方法

<template>
  <div>
    <el-input
      v-model="contentA"
      placeholder="请输入内容"
      @change="onCange"
      @input="onInput"
    ></el-input>
    <!-- 以下方式不能使用简写 "@"符号 -->
    <el-input
      v-model="contentB"
      placeholder="请输入内容"
      v-on="{
        change: onCange,
        input: onInput
      }"
    ></el-input>
    <!-- 以下方式调用函数需加"()"-->
    <el-input
      v-model="contentC"
      placeholder="请输入内容"
      @input="
        {
          onInputA(), onInputB()
        }
      "
    ></el-input>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      contentA: '',
      contentB: '',
      contentC: ''
    }
  },
  methods: {
    onCange() {
      console.log('change')
    },
    onInput() {
      console.log('onInput')
    },
    onInputA() {
      console.log('onInputA')
    },
    onInputB() {
      console.log('onInputB')
    }
  }
}
</script>
<style scoped></style>