Vue 使用户输入的字母自动转换成大写，并同步到数据

最新推荐文章于 2024-09-19 09:41:07 发布

纷飞丿

最新推荐文章于 2024-09-19 09:41:07 发布

阅读量5.7k

点赞数

分类专栏： vue杂谈文章标签：前端 vue js

本文链接：https://blog.csdn.net/f18855666661/article/details/118420283

版权

vue杂谈专栏收录该内容

3 篇文章 2 订阅

订阅专栏

平时的业务中，有时需要将用户输入的字母直接转换成大写，并且同步到数据。我们可以使用 Vue computed 中的 get 和 set 完美的完成这个需求，看下面的代码实例：

<template>
  <div id="app">
    <el-input 
      v-model="nameComputed" 
      placeholder="输入字母会自动转换成大写" 
      clearable></el-input>
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return {
      name: ''
    }
  },
  computed: {
    nameComputed: {
      get: function () {
        return this.name
      },
      set: function (val) {
        this.name = val.toUpperCase()
      }
    }
  }
}
</script>