v-model 调用函数怎么传参
时间: 2024-05-19 20:08:37 浏览: 122
在Vue.js中,v-model指令用于在表单控件和Vue.js实例的数据之间双向绑定。在调用函数时传递参数,可以通过在v-model指令中使用计算属性来实现。
例如,我们可以创建一个名为“message”的data属性,并将其与一个文本输入框双向绑定:
<template>
<div>
<input v-model="message">
<button @click="sendMessage">Send</button>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
methods: {
sendMessage() {
console.log(this.message);
}
}
}
</script>
在上面的示例中,我们创建了一个名为“sendMessage”的方法,并在按钮的@click事件中调用该方法。当用户在文本框中输入文本时,该方法将控制台输出该文本。
如果要将其他参数传递给sendMessage方法,我们可以创建一个计算属性,该属性将返回一个包含所需参数的对象:
<template>
<div>
<input v-model="message">
<button @click="sendMessage({param1: 'value1', param2: 'value2'})">Send</button>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
methods: {
sendMessage(params) {
console.log(this.message, params.param1, params.param2);
}
},
computed: {
messageParams() {
return {
param1: 'value1',
param2: 'value2'
}
}
}
}
</script>
在上面的示例中,我们创建了一个名为“messageParams”的计算属性,并在sendMessage方法的调用中使用该属性来传递参数。当用户在文本框中输入文本时,该方法将控制台输出该文本以及参数值"value1"和"value2"。
相关推荐

















