Vue v-on 指令

示例

单击按钮时，使用 v-on 指令更改 <div> 元素的背景颜色。

<template>
  <h1>v-on Example</h1>
  <div v-bind:class="{ yelClass: bgColor }">
    <p>Click the button to change background color of this DIV box.</p>
    <button v-on:click="bgColor = !bgColor">Click</button>
    <p>bgColor property: "{{ bgColor }}"</p>
  </div>
</template>

运行示例 »

请参阅下面的更多示例。

定义和用法

v-on 指令放置在元素上以附加事件侦听器。

要使用 v-on 附加事件侦听器，我们需要提供事件类型、任何修饰符以及该事件发生时应运行的方法或表达式。

如果 v-on 放置在常规 HTML 标签上，我们可以定义监听的事件类型是常规事件，例如 input, click 或 mouseover。

如果 v-on 放置在自定义组件上，我们可以定义监听的事件类型是从该组件发出的自定义事件。

v-on: 的简写形式是 @。

修饰符

修饰符	详细信息
`.capture`	首先在设置 `.capture` 修饰符的情况下捕获冒泡事件。	运行示例 »
`.once`	该事件只能在页面加载后触发一次。	运行示例 »
`.passive`	通过在 DOM 元素上设置 `passive: true` 将事件处理程序标记为被动。这意味着浏览器不必等待查看 `event.preventDefault()` 是否被调用，并且对于经常发生的事件（例如滚动），将事件处理程序设置为被动可以提高性能。	运行示例 »
`.prevent`	该事件被阻止触发。例如，可用于阻止默认表单提交事件。不可能阻止所有事件。	运行示例 »
`.stop`	冒泡事件停止进一步传播。调用 `event.stopPropagation()`。	运行示例 »
`.self`	默认情况下，事件向上传播到父元素，因此一个事件可以触发多个事件侦听器。 `.self` 修饰符仅允许来自其自身元素的事件触发事件侦听器。	运行示例 »
`.{keyAlias}`	限制事件处理程序仅对某些事件键做出反应，例如 `v-on:click.right` 或 `v-on:keyup.s`。我们甚至可以要求多个按键需要同时发生才能让处理程序做出反应，如下所示:`v-on:click.left.shift`。	运行示例 »
`.left`	单击鼠标左键。
`.right`	单击鼠标右键。
`.middle`	单击鼠标中键。

更多示例

示例 1

首先使用.capture修饰符捕获父元素中的点击事件。

<template>
  <h1>v-on Example</h1>
  <p>当在父 DIV 元素上使用".capture"修饰符时，当单击子元素时，将首先在父元素中捕获事件。</p>
  <p>如果从此代码中删除".capture"修饰符，则子元素将首先捕获单击事件。 这是默认行为，事件首先在子元素中冒泡，然后到父元素。</p>
  <div v-on:click.capture="this.msg.push('parent')" id="parent">
    <p>This is the parent element.</p>
    <div v-on:click="this.msg.push('child')">
      <p>This is the child element. CLICK HERE!</p>
    </div>
  </div>
  <p>捕获事件的时间和地点的顺序。</p>
  <ol>
    <li v-for="x in msg">{{ x }}</li>
  </ol>
</template>

<script>
export default {
  data() {
    return {
      msg: []
    };
  }
}
</script>

<style scoped>
div {
  margin: 10px;
  padding: 10px;
  border: dashed black 1px;
}
#parent {
  width: 250px;
  background-color: lightpink;
}
#parent > div {
  cursor: pointer;
  background-color: lightgreen;
}
</style>

运行示例 »

示例 2

使用 .stop 修饰符阻止事件进一步传播。

<template>
  <h1>v-on Example</h1>
  <p>".stop"修饰符可阻止单击事件进一步传播。</p>
  <p>如果从此代码中删除".stop"修饰符，父元素还将捕获子元素上的单击事件。</p>
  <div v-on:click="this.msg.push('parent')" id="parent">
    <p>This is the parent element.</p>
    <div v-on:click.stop="this.msg.push('child')">
      <p>这是子元素。 点击这里！</p>
    </div>
  </div>
  <p>捕获事件的时间和地点的顺序。</p>
  <ol>
    <li v-for="x in msg">{{ x }}</li>
  </ol>
</template>

<script>
export default {
  data() {
    return {
      msg: []
    };
  }
}
</script>

<style scoped>
div {
  margin: 10px;
  padding: 10px;
  border: dashed black 1px;
}
#parent {
  width: 250px;
  background-color: lightpink;
}
#parent > div {
  cursor: pointer;
  background-color: lightgreen;
}
</style>

运行示例 »

示例 3

使用.passive修饰符来增强滚动过程中的性能。

<template>
  <h1>v-on Example</h1>
  <p>'.passive' 修饰符将事件处理程序设置为被动，这可以提高性能。</p>
  <div v-on:scroll.passive="this.scrollTimes++" id="parent">
    <p>Scroll here.</p>
    <p>Bladi-bladi-bladi</p>
    <p>potato potato</p>
    <p>Scroll-scroll-scroll</p>
    <p>Scroll more...</p>
  </div>
  <p>Scroll happended {{ scrollTimes }} times.</p>
</template>

<script>
export default {
  data() {
    return {
      scrollTimes: 0
    };
  }
}
</script>

<style scoped>
div {
  margin: 10px;
  padding: 10px;
  border: dashed black 1px;
  width: 200px;
  height: 50px;
  overflow: scroll;
  background-color: lightcoral;
}
</style>

运行示例 »

示例 4

使用 .once 修饰符来增强滚动期间的性能。

<template>
  <h1>v-on Example</h1>
  <p>".once"修饰符可防止事件发生多次。</p>
  <button v-on:click.once="clickTimes++">Click</button>
  <p>Click event happened {{ clickTimes }} times.</p>
</template>

<script>
export default {
  data() {
    return {
      clickTimes: 0
    };
  }
}
</script>

运行示例 »

示例 5

使用 .self 修饰符，以便父元素仅对自身发生的点击事件做出反应。

<template>
  <h1>v-on Example</h1>
  <p>'.self' 修饰符设置在父元素上。</p>
  <p>单击子元素并查看事件如何传播经过父元素，因为父单击事件仅对元素本身的单击做出反应。</p>
  <div v-on:click="addMsg('grandParent')" id="grandParent">
    Grandparent element
    <div v-on:click.self="addMsg('parent')">
      Parent element.
      <div v-on:click="addMsg('child')">
        Child element. CLICK HERE!
      </div>
    </div>
  </div>
  <p>捕获事件的时间和地点的顺序。</p>
  <ol>
    <li v-for="x in msg">{{ x }}</li>
  </ol>
</template>

<script>
export default {
  data() {
    return {
      msg: []
    };
  },
  methods: {
    addMsg(txt) {
      this.msg.push(txt);
    }
  }
}
</script>

<style scoped>
div {
  margin: 10px;
  padding: 10px;
  border: dashed black 1px;
  cursor: pointer;
}
#grandParent {
  width: 250px;
  background-color: lightpink;
}
#grandParent > div {
  background-color: lightgreen;
}
#grandParent > div > div {
  background-color: lightskyblue;
}
</style>

运行示例 »

示例 6

使用 .prevent 修饰符防止单击鼠标右键时出现默认下拉列表。

<template>
  <h1>v-on Example</h1>
  <p>".prevent"修饰符设置为防止用户单击鼠标右键时出现下拉菜单。</p>
  <div 
    v-on:click.right.prevent="changeColor" 
    v-bind:style="{ backgroundColor: 'hsl(' + bgColor + ',80%,80%)' }">
    <p>Press right mouse button here.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bgColor: 0
    }
  },
  methods: {
    changeColor() {
      this.bgColor += 50
    }
  }
}
</script>

<style scoped>
div {
  margin: 10px;
  padding: 10px;
  border: dashed black 1px;
  width: 200px;
}
</style>

运行示例 »

示例 7

当用户在按住 Shift 键的同时单击鼠标左键时，使用 .left.shift 修饰符更改图像。

<template>
  <h1>v-on Example</h1>
  <p>Hold 'Shift' key and press left mouse button on the image:</p>
  <img v-on:click.left.shift="changeImg" v-bind:src="imgUrl">
</template>

<script>
export default {
  data() {
    return {
      imgFish: true,
      imgUrl: 'img_fish.svg'
    }
  },
  methods: {
    changeImg() {
      this.imgFish = !this.imgFish;
      if (this.imgFish) {
        this.imgUrl = 'img_fish.svg'
      }
      else {
        this.imgUrl = 'img_tiger.svg'
      }
    }
  }
}
</script>

<style scoped>
img {
  width: 200px;
}
</style>

运行示例 »

Vue 教程

Vue 扩展

Vue 参考

Vue 示例

Vue v-on 指令

示例

定义和用法

修饰符

更多示例

示例 1

示例 2

示例 3

示例 4

示例 5

示例 6

示例 7

相关页面

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！