2.使用VUE来事项应该输入框的组件

 <template>
    <div>
        <div class="rows">
            <div>
                <input class="input" :class="{'highlight' : highlight}" type="text" v-model="input" @focus="focus" @blur="blur" :maxlength="maxSize" />
            </div>
             <div class="tips">{{num}}/{{maxSize}}</div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'sinput',
  props: [],
  data () {
    return {
        input: '',
        num: 0,
        maxSize: 10,
        highlight: false
    }
  },
  created () {
  },
  watch: {
    input(val) {
        this.num = val.length;
    }
  },
  computed: {
  },
  methods: {
      focus(){
        this.highlight = true
      },

      blur(){
        this.highlight = false
      }
  }
}
</script>

<style lang="scss" scoped>
    .input {
        width: 100%;
        border: 1px solid #ccc;
        height: 80px;
        font-size: 50px;
    }

    .tips{
        float: right;
        position: relative;
        top: -70px;
        right: 20px;
        font-size: 36px;
    }
    
    .highlight{
        border: 1px solid #2192D9
    }

</style>
效果图

2. 函数递归调用

此图像的alt属性为空;文件名为image-1.png
代码实现
此图像的alt属性为空;文件名为image-2.png
预览结果

参考链接: https://zhuanlan.zhihu.com/p/141890366