new Vue({ el: '#transition-demo', data: { input: '', validationInput: false }, filters: { validator: function(value) { if (value.length > 4) { this.validationInput = true; } else { this.validationInput = false; } return value; } } });
<div id="transition-demo"> <input type="text" v-model="input | validator" /> <p class="success" v-if="validationInput" v-transition="input">入力値:{{input}} OKです!</p> <p class="error" v-if="!validationInput" v-transition="input">入力値:{{input}} ダメです!</p> </div>
.success { color: green; } .error { color: red; } .input-transition { transition: all .3s ease; height: 30px; padding: 10px; background-color: #eee; overflow: hidden; } .input-enter, .input-leave { height: 0; padding: 0 10px; opacity: 0; }