方法

使用事件对象调用方法

当发生事件并调用方法时，默认情况下会随方法传递事件对象。 这非常方便，因为事件对象包含许多有用的数据，例如目标对象、事件类型或发生"click"或"mousemove"事件时的鼠标位置。

示例

v-on 指令用于 <div> 元素来侦听"mousemove"事件。 当"mousemove"事件发生时，会调用"mousePos"方法，并且默认使用该方法发送事件对象，这样我们就可以获得鼠标指针的位置。

我们必须使用 this. 前缀从方法中引用 Vue 实例数据属性内的"xPos"。

<div id="app">   <p>Move the mouse pointer over the box below:</p>   <div v-on:mousemove="mousePos"></div> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script>   const app = Vue.createApp({     data() {       return {         xPos: 0,         yPos: 0       }     },     methods: {       mousePos(event) {         this.xPos = event.offsetX         this.yPos = event.offsetY       }     }   })   app.mount('#app') </script> »

如果我们将上面的示例仅扩展一行，我们还可以根据鼠标指针在 x 方向上的位置来改变背景颜色。 我们唯一需要添加的是 v-bind 来更改 style 属性中的背景颜色:

示例

与上面示例的区别在于，背景颜色通过 v-bind 绑定到"xPos"，因此 hsl"hue"值设置为等于"xPos"。

<div   v-on:mousemove="mousePos"   v-bind:style="{backgroundColor:'hsl('+xPos+',80%,80%)'}"> </div> »

在下面的示例中，事件对象携带 <textarea> 标签中的文本，使其看起来像我们正在笔记本中书写。

示例

v-on 指令用于 <textarea> 标签，以侦听"input"事件，每当 textarea 元素内的文本发生更改时就会发生该事件。

当"input"事件发生时，将调用"writeText"方法，并且默认使用该方法发送事件对象，以便我们可以从 <textarea> 标签获取文本。 Vue 实例中的"text"属性由"writeText"方法更新。 span 元素设置为使用双花括号语法显示"text"值，并且由 Vue 自动更新。

<div id="app">   <textarea v-on:input="writeText" placeholder="Start writing.."></textarea>   <span>{{ text }}</span> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script>   const app = Vue.createApp({     data() {       return {         text: ''       }     },     methods: {       writeText(event) {         this.text = event.target.value       }     }   })   app.mount('#app') </script> »

---

传递参数

有时我们希望在事件发生时向方法传递一个参数。

假设您是护林员，并且想要记录驼鹿的目击事件。 有时一天内会看到一两只驼鹿，有时可能会看到超过 10 只驼鹿。 我们添加了按钮来计算目击事件"+1"和"+5"，并添加了"-1"按钮，以防我们计数太多。

在这种情况下，我们可以对所有三个按钮使用相同的方法，并且只需从不同的按钮调用具有不同数字作为参数的方法。 这就是我们如何调用带有参数的方法:

<button v-on:click="addMoose(5)">+5</button>

这就是"addMoose"方法的样子:

methods: {   addMoose(number) {     this.count = this.count + number   } }

让我们看看在完整的示例中如何使用方法传递参数。

示例

<div id="app">   <img src="img_moose.jpg">   <p>{{ "Moose count: " + count }}</p>   <button v-on:click="addMoose(+1)">+1</button>   <button v-on:click="addMoose(+5)">+5</button>   <button v-on:click="addMoose(-1)">-1</button> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script>   const app = Vue.createApp({     data() {       return {         count: 0       }     },     methods: {       addMoose(number) {         this.count+=number       }     }   })  app.mount('#app') </script> »

---

传递参数和事件对象

如果我们想传递事件对象和另一个参数，我们可以在调用方法的地方使用一个保留名称"$event"，如下所示:

<button v-on:click="addAnimal($event, 5)">+5</button>

这就是 Vue 实例中的方法的样子:

methods: {   addAnimal(e, number) {     if(e.target.parentElement.id==="tigers"){       this.tigers = this.tigers + number     }   } }

现在让我们看一个示例，了解如何使用方法传递事件对象和另一个参数。

示例

在此示例中，我们的方法接收事件对象和文本。

<div id="app">   <img     src="img_tiger.jpg"     id="tiger"     v-on:click="myMethod($event,'Hello')">   <p>"{{ msgAndId }}"</p> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script>   const app = Vue.createApp({     data() {       return {         msgAndId: ''       }     },     methods: {       myMethod(e,msg) {         this.msgAndId = msg + ', '         this.msgAndId += e.target.id       }     }   })  app.mount('#app') </script> »

---

更大的示例

在此示例中，我们看到可以仅使用一种方法来对三种不同的动物进行计数，每种动物具有三种不同的增量。 我们通过传递事件对象和增量数来实现这一点:

示例

单击按钮时，增量大小和事件对象都会作为参数传递给该方法。 保留字"$event"用于通过方法传递事件对象，以告知要计数的动物。

<div id="app">   <div id="tigers">     <img src="img_tiger.jpg">     <button v-on:click="addAnimal($event,1)">+1</button>     <button v-on:click="addAnimal($event,5)">+5</button>     <button v-on:click="addAnimal($event,1)">-1</button>   </div>   <div id="moose">     <img src="img_moose.jpg">     <button v-on:click="addAnimal($event,1)">+1</button>     <button v-on:click="addAnimal($event,5)">+5</button>     <button v-on:click="addAnimal($event,1)">-1</button>   </div>   <div id="kangaroos">     <img src="img_kangaroo.jpg">     <button v-on:click="addAnimal($event,1)">+1</button>     <button v-on:click="addAnimal($event,5)">+5</button>     <button v-on:click="addAnimal($event,1)">-1</button>   </div>   <ul>     <li>Tigers: {{ tigers }} </li>     <li>Moose: {{ moose }} </li>     <li>Kangaroos: {{ kangaroos }} </li>   </ul> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script>   const app = Vue.createApp({     data() {       return {         tigers: 0,         moose: 0,         kangaroos: 0       }     },     methods: {       addAnimal(e,number) {         if(e.target.parentElement.id==="tigers") {           this.tigers+=number         }         else if(e.target.parentElement.id==="moose") {           this.moose+=number         }         else {           this.kangaroos+=number         }       }     }   })  app.mount('#app') </script> »

---

Vue 练习

通过练习测试自己

练习题:

编写缺少的代码，以便在单击 <div> 标签时调用"writeText"方法。

<div id="app">
  <p>Click on the box below:</p>
  <div =>
    {{ text }}
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        text: ''
      }
    },
    : {
      writeText() {
        this. = 'Hello World!'
      }
    }
  })
  app.mount('#app')
</script>

---