vue動態class+bootstrap實現表單實時驗證顯示效果

話不多說，先看GIF

利用vue的監聽和動態class綁定

這里模擬檢測輸入的字符串是否為“admin”

html

<div id="loginFrom" class="form-group has-feedback" :class="checkStatus.hasClass">
    <div>
        <input name="username" type="text" class="form-control" placeholder="username" v-model="formData.username">
        <span class="glyphicon form-control-feedback" :class="checkStatus.iconClass"></span>
    </div>
</div>

vue

new Vue({
    el: '#app',
    data: {
        formData: {
            username: ''
        },

        checkStatus: {
            hasClass: '',
            iconClass: ''
        }
    },
    created: function () {},
    methods: {},
    watch: {
        'formData.username': function (newValue, oldValue) {
            if (newValue.trim() === 'admin') {
                this.checkStatus.hasClass = 'has-success';
                this.checkStatus.iconClass = 'glyphicon-ok'
            } else {
                this.checkStatus.hasClass = 'has-error';
                this.checkStatus.iconClass = 'glyphicon-remove'
            }
            console.log(newValue + ' -- ' + oldValue)
        }
    }
})

注意watch監聽里不要用箭頭函數，箭頭函數支持不好