Vue Click事件绑定实例及使用方法

<template>
  <div>
    <button @click="alertMsg">点击我！</button>
  </div>
</template>

<script>
  export default {
    methods: {
      alertMsg() {
        alert('Hello World!');
      }
    }
  }
</script>

二、Vue Click事件绑定传递参数

<template>
  <div>
    <input type="text" v-model="message" placeholder="请输入信息">
    <button @click="alertMsg(message)">点击我！</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: ''
      }
    },
    methods: {
      alertMsg(msg) {
        alert(msg);
      }
    }
  }
</script>

三、Vue Click事件绑定事件修饰符

<template>
  <div @contextmenu.prevent>
    右键点击我！
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick(e) {
        e.preventDefault();
        alert('你点了右键！');
      }
    }
  }
</script>

四、Vue Click事件绑定表达式

<template>
  <div>
    <button @click="count++" :disabled="isDisabled">点击我！</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 0,
        isDisabled: true
      }
    }
  }
</script>

五、Vue Click事件绑定多个方法

<template>
  <div>
    <button @click="changeColor();changeBgColor()">点击我！</button>
  </div>
</template>

<script>
  export default {
    methods: {
      changeColor() {
        this.$refs.item.style.color = 'red';
      },
      changeBgColor() {
        this.$refs.item.style.backgroundColor = 'blue';
      }
    }
  }
</script>

总结