BcRikko · July 1, 2015 14:01
diff --git a/index.html b/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>
diff --git a/index.js b/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;
        }
    }
 });
diff --git a/style.css b/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;
	}