在Vue中禁止v-model输入发生变化,可以通过以下几种方式实现:
<template>
<input v-model="inputValue" />
</template>
<script>
export default {
data() {
return {
fixedValue: '固定的值'
};
},
computed: {
inputValue: {
get() {
return this.fixedValue;
},
set(value) {
// 不做任何操作,禁止输入发生变化
}
}
}
};
</script>
<template>
<input :value="inputValue" @input="disableInput" />
</template>
<script>
export default {
data() {
return {
inputValue: '固定的值'
};
},
methods: {
disableInput(event) {
event.preventDefault();
}
}
};
</script>
<template>
<input v-model="inputValue" v-disable-input />
</template>
<script>
export default {
data() {
return {
inputValue: '固定的值'
};
},
directives: {
disableInput: {
bind(el, binding, vnode) {
vnode.context.inputValue = '固定的值';
}
}
}
};
</script>
以上是三种常见的禁止Vue中v-model输入发生变化的方法,根据具体需求选择适合的方式即可。
领取专属 10元无门槛券
手把手带您无忧上云