Vue Methods 方法
使用事件对象调用方法
当发生事件并调用方法时，默认情况下会随方法传递事件对象。 这非常方便，因为事件对象包含许多有用的数据，例如目标对象、事件类型或发生"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>
亲自试一试 »
