vue 如何將輸入框的輸入自動小寫轉大寫（使用 v-model 時采取另一種方式）

本文轉載自查看原文 2018-07-15 21:26 11075 vue/ Vue + Element ui

前言：小寫轉大寫，可以用過濾器實現，但當使用 v-model 時就不行了，這里有解決方案。轉載請注明出處：https://www.cnblogs.com/yuxiaole/p/9289205.html

可以采用過濾器實現

<html>

<head>
    <title>測試</title>
</head>
<body>
<div id="app">

    <input id="val1" v-model="value1">
    <br/>
    顯示小寫轉大寫 ： {{ value1 | upper}}

</div>
<!-- 引入組件庫 -->
<script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script>

<script type="text/javascript">

    new Vue({
        el: "#app",
        data: {
            value1: ""
        },
        filters: {
            upper: function (value) {
                if (!value) return '';
                value = value.toString();
                return value.toUpperCase();
            }
        }
    });
</script>

</body>

</html>

v-model 中的實現

　　如果想要在使用 v-model 時，也要大寫轉小寫，就不能喝 filter 結合，因為這會報錯，這時應該換換種實現方式。可以采用計算屬性。

<html>

<head>
    <title>測試</title>
</head>
<body>
<div id="app">
    輸入框中直接輸入小寫轉大寫：
    <input v-model="value2Computed">
</div>
<!-- 引入組件庫 -->
<script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script>

<script type="text/javascript">

    new Vue({
        el: "#app",
        data: {
            value2: ""
        },
        computed : {
            value2Computed : {
                get: function(){
                    return this.value2;
                },
                set : function(val){
                    this.value2 = val.toUpperCase();
                }
            }
        }
    });
</script>

</body>

</html>

form表單中實現，加上校驗

　　form表單中實現同v-model，不過校驗的 trigger 得是 change。

<html>

<head>
    <title>測試</title>
    <link rel="stylesheet" href="../lib/elementui/theme-chalk/index.css" type="text/css">
</head>
<body>
<div id="app">
    3、form表單中 有校驗、並且小寫轉大小：trigger: 'change'
    <el-form :model="ruleForm" :rules="rules">
      <el-form-item label="名稱（必須包含123）" prop="name">
        <el-input v-model="nameComputed"></el-input>
      </el-form-item>
    </el-form>
</div>
<!-- 引入組件庫 -->
<script type="text/javascript" src="../lib/vue.js"></script>
<script type="text/javascript" src="../lib/elementui/index.js"></script>

<script type="text/javascript">
    var validateName = (rule, value, callback) => {
      if (value.indexOf("123") == -1) {
        callback(new Error('請輸入包含123'));
      } else {
        callback();
      }
    };
    new Vue({
        el: "#app",
        data: {
            ruleForm : {
              name : ""
            },
            rules : {
              'name' : [
                 { required: true, message: '請輸入名稱', trigger: 'change' },
                 { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'change' },
                 { validator: validateName, trigger: 'change' }
              ]
            }
        },
        computed : {
            nameComputed : {
              get: function(){
                  return this.ruleForm.name;
              },
              set : function(val){
                  this.ruleForm.name = val.toUpperCase();
              }
            }
        }
    });
</script>

</body>

</html>

轉載請注明出處：https://www.cnblogs.com/yuxiaole/p/9289205.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 VUE -input輸入框小寫自動轉換成大寫 Apollo實現@ConfigurationProperties配置刷新的另一種方式 EasyUI 另一種form提交方式 linux安裝oracle的另一種方式 Ajax跨域訪問XML數據的另一種方式——使用YQL查詢語句在Vue中輸入框自動獲取焦點的三種方式 linux 進程優先級之設置實時進程（另一種方式是設置nice值）【轉】 2種方式實現vue自定義組件v-model mysql in 的另一種替換方法另一種鎖：ReentractLock