在 Vue.js 中,要在模板中去除元素的焦点,可以使用
blur
方法,并在绑定在该元素的指令中调用它。
例如,假设你有一个带有
ref
属性的文本框元素,可以在模板中这样写:
<template>
<input type="text" ref="input" />
</template>
<script>
export default {
methods: {
removeFocus() {
this.$refs.input.blur()
</script>
然后,你就可以在方法中调用 removeFocus
方法,来去除文本框的焦点。
例如,你可以在按钮的点击事件中调用这个方法:
<template>
<input type="text" ref="input" />
<button @click="removeFocus">Remove focus</button>
</template>
<script>
export default {
methods: {
removeFocus() {
this.$refs.input.blur()
</script>
这样,当用户点击按钮时,文本框就会失去焦点。
如果你希望在某些条件下去除焦点,可以使用条件渲染来控制是否调用 blur
方法,例如:
<template>
<input type="text" ref="input" />
<button @click="removeFocus">Remove focus</button>
</template>
<script>
export default {
data() {
return {
removeFocus: false
methods: {
toggleFocus() {
this.removeFocus = !this.removeFocus
if (this.removeFocus) {
this.$refs.input.blur()
</script>
在这种情况下,当用户点击按钮时,文本框会切换获