BcRikko/index.html

## index.html
<!doctype html>
<html lang="ja">
<head>
    <meta chraset="utf-8">
    <title>ファイル出力</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.1/vue.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

## index.js
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;
        }
    }
});

## style.css
@charset "UTF-8";
.success {
    color: green;
}
.error {
    color: red;
}

/* v-transitionでは以下のスタイルが適用される */
.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;
}
	<!doctype html>
	<html lang="ja">
	<head>
	<meta chraset="utf-8">
	<title>ファイル出力</title>
	<link href="style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	<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>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.1/vue.min.js"></script>
	<script src="index.js"></script>
	</body>
	</html>
	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;
	}
	}
	});
	@charset "UTF-8";
	.success {
	color: green;
	}
	.error {
	color: red;
	}

	/* v-transitionでは以下のスタイルが適用される */
	.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;
	}