vue快速入门（五十四）$nextTick的使用

news2024/11/17 0:08:10

注释很详细，直接上代码

新增内容
$nextTick的使用场景演示

源码

App.vue

<template>
  <div id="app">
    <h3>{{name}}</h3>
    <button @click="showfixed">修改</button>
    <form action="post" v-show="isShow">
      <input type="text" ref="inputvalue">
      <div @click="onClick">提交</div>
    </form>
  </div>
</template>
<script>

export default {
  name: "App",
  components: {
  },
  data() {
    return {
      isShow:false,
      name:'代码对我眨眼睛'
    };
  },
  methods: {
    showfixed(){
      this.isShow=true;
      //因为vue修改数据以后并不是立即刷新界面，
      //所以此时是找不到inputvalue的
      //所以需要nextTick在下一轮的渲染周期中执行该函数
     this.$nextTick(()=>{
       this.$refs.inputvalue.focus();
     })
    },
    onClick(){
      //如果去前后空格后不为空
      if(this.$refs.inputvalue.value.trim()!==''){
        this.name=this.$refs.inputvalue.value;
        this.isShow=false;
      }
    }
  }
};
</script>
<style lang="less">

h3{
  display: inline-block;
}
form div{
  display: inline-block;
  border: gray 1px solid;
  margin-left: 10px;
  border-radius: 2px;
  cursor: pointer;
}
</style>