Vue 教程

onClick 事件

v-on 指令允许我们根据指定的事件执行操作。

使用 v-on:click 在单击元素时执行操作。

示例

v-on 指令用于 <button> 标签来监听"click"事件。 当"click"事件发生时，"lightOn"数据属性在"true"和"false"之间切换，使灯泡后面的黄色 <div> 可见/隐藏。

<div id="app">   <div id="lightDiv">     <div v-show="lightOn"></div>     <img src="img_lightBulb.svg">   </div>   <button v-on:click="lightOn = !lightOn">Switch light</button> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script>   const app = Vue.createApp({     data() {       return {         lightOn: false       }     }   })   app.mount('#app') </script> »

---

oninput 事件

使用 v-on:input 在元素获得输入（例如在文本字段中击键）时执行操作。

示例

计算输入文本字段的击键次数:

<div id="app">   <input v-on:input="inpCount++">   <p>{{ 'Input events occured: ' + inpCount }}</p> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script>   const app = Vue.createApp({     data() {       return {         inpCount: 0       }     }   })   app.mount('#app') </script> »

---

mousemove 事件

使用v-on:mousemove在鼠标指针移动到元素上时执行操作。

示例

当鼠标指针移到 <div> 元素上时更改其背景颜色:

<div id="app">   <p>Move the mouse pointer over the box below</p>   <div v-on:mousemove="colorVal=Math.floor(Math.random()*360)"        v-bind:style="{backgroundColor:'hsl('+colorVal+',80%,80%)'}">   </div> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script>   const app = Vue.createApp({     data() {       return {         colorVal: 50       }     }   })   app.mount('#app') </script> »

---

在 v-for 循环中使用 v-on

您还可以在 v-for 循环中使用 v-on 指令。

数组的项目可用于 v-on 值内的每次迭代。

示例

显示基于食物数组的列表，并为每个项目添加一个单击事件，该事件将使用数组项目中的值来更改图像的源。

<div id="app">   <img v-bind:src="imgUrl">   <ol>     <li v-for="food in manyFoods" v-on:click="imgUrl=food.url">       {{ food.name }}     </li>   </ol> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script>   const app = Vue.createApp({     data() {       return {         imgUrl: 'img_salad.svg',         manyFoods: [           {name: 'Burrito', url: 'img_burrito.svg'},           {name: 'Salad', url: 'img_salad.svg'},           {name: 'Cake', url: 'img_cake.svg'},           {name: 'Soup', url: 'img_soup.svg'}         ]       }     }   })   app.mount('#app') </script> »

---

v-on 的简写

"v-on"的简写形式就是"@"。

示例

这里我们只写"@"而不是"v-on":

<button @:click="lightOn = !lightOn">Switch light</button> »

我们将在本教程稍后开始使用 @ 语法。

---

Vue 练习

通过练习测试自己

练习题:

完成代码，以便在单击按钮时切换图像。

<template>
  <button ="showImg = !showImg">
    Toggle image
  </button>
  <img src="flower.jpg" alt="flower" v-show="showImg">
</template>

<script>
  export default {
    data() {
      return {
        : true
      }
    }
  }
</script>

---