Vue.js 使用 refs 聚焦元素目标

var myApp = new Vue({
  el: '#app',
  data: {
    onEdit: false,
    msg: 'Something in here',
  },
  methods: {
    switchAndFocus() {
      if(!this.onEdit) {
       this.onEdit = true;
       this.$refs.afterClick.focus();
      }
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <span class="before-click" @click="switchAndFocus()" v-show="!onEdit">{{msg}}</span>
  <input type="text" class="after-click" ref="afterClick" :value="msg" v-show="onEdit">
</div>

var myApp = new Vue({
  el: '#app',
  data: {
    onEdit: false,
    msg: 'Something in here',
  },
  methods: {
    switchAndFocus() {
      if(!this.onEdit) {
       this.onEdit = true;
       this.$nextTick(function(){
        this.$refs.afterClick.focus();
       });
      }
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <span class="before-click" @click="switchAndFocus()" v-show="!onEdit">{{msg}}</span>
  <input type="text" class="after-click" ref="afterClick" :value="msg" v-show="onEdit">
</div>

Vue.js相关问答推荐

Vue 3 需要 main.js 中的文件

如何在Vue3中使用vuechartjs 5.2从父组件更新图表

仅在构建时为 Vue3 和 TailwindCSS 添加前缀

VueJS3 - 在 for 循环中获取元素的句柄

如何使用 vue.js 和 vue 路由实现当前路由的子菜单的子菜单

带有参数的 Vuex 映射 Getter - 缓存？

如何只查看数组中的一个对象？

在 vue.js 中获取当前时间和日期

Vue @click 不适用于存在 href 的anchor锚标记

v-for 中的 VueJS 插槽

全局禁用 vuetify 组件的涟漪效应

Vue 3 组合 API，如何在 setup() 函数中获取上下文父属性？

vue 3 使用 Vuex 和路由的服务器端渲染

在 .vue 文件中使用 Vue.set() 和 Vue.use()

从 ajax 调用填充 Vue.js 中的下拉列表

vue-router 如何使用 hash 推送({name："question"})？

使用 Vee-validate 禁用按钮，直到正确填写表单

Vuetify v-data-table 固定标题不起作用

Vue 3 组合 API 数据()函数

在 Vue 中使用事件修饰符 .prevent 提交表单而不进行重定向