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 CDN的html工作，但v—如果不工作

从组件中检索 Shopware CMS 编辑器中的自定义实体数据

Vue CLI： 如何在一个vtextfield更改时让另一个vtextfield的值也同时更改，但同时又可以覆盖它？

为什么 Pinia/Vuex 比使用服务类的classic 方法更受欢迎？

vue 不重新渲染数据更改

为什么普通对象在 Vue3 中自动变成响应式的？

Svelte 中的简单react 性实验以意想不到的方式失败了. Vue 等效项没有

使用 nuxt.js 组件自动导入对性能不利吗？

将初始值设置为可直接在 HTML 中使用的 vue.js 模型

Webpack - MiniCssExtractPlugin 不提取文件

实现登录命令并访问 vuex 存储

在 Vue 项目之间共享assets和组件

在 jest document.querySelector 中测试 vue 组件期间始终返回 null

React.js 是否有类似 Vue.js

如何像 React 中的 {...props} 一样在 Vue 中解构 props？

如何使用 vuex 删除项目？

如何在 NPM 上创建和发布 Vuejs 组件

如何在 Vue.js 中获取组件元素的 offsetHeight？

如何克隆props对象并使其无react

Vue Router beforeRouteLeave 不会停止子组件