reoxb/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Example templates</title>
</head>

<body>
    <div id="app" v-cloak>
        <h1>Bienvenido {{ user.name | uppercase }}</h1>

        <div class="login-errors-container" v-if="errors.length !== 0">
            <ol class="login-errors">
                <li v-for="error in errors"> {{ error }}</li>
            </ol>
        </div>

        <form class="login" v-on:submit.prevent="onLogin">
            <div class="login-field">
                <label for="username">Nombre de usuario</label>
                <input id="username" type="text" v-model="user.name" />
            </div>

            <div class="login-field">
                <label for="password">Contraseña</label>
                <input id="password" type="password" v-model="user.password" />
            </div>

            <div class="login-field">
                <button type="submit" v-bind:disabled="isFormEmpty">Entrar</button>
            </div>
        </form>

        <a v-bind:href="urlPasswordChange" target="_blank">
            ¿Has olvidado tu contraseña?
        </a>
    </div>

    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="app.js"></script>
<script id="jsbin-javascript">
var app = new Vue({
    el: '#app',
    data: {
        user: { name: null, password: null },
        urlPasswordChange: 'http://localhost:8080',
        errors: []
    },
    computed: {
         isFormEmpty: function () {
             return !(this.user.name && this.user.password);
         }
    },
    methods: {
        onLogin: function () {
            this.errors = [];

            if (this.user.name.length < 6) {
                this.errors.push('El nombre de usuario tiene que tener al menos 6 caracteres');
            }

            if (this.user.password.length < 6) {
                this.errors.push('La contraseña tiene que tener al menos 6 caracteres');
            }
        }
    },
    filters: {
        uppercase: function (data) {
            return data && data.toUpperCase();
        }
    }
});
</script>


<script id="jsbin-source-javascript" type="text/javascript">var app = new Vue({
    el: '#app',
    data: {
        user: { name: null, password: null },
        urlPasswordChange: 'http://localhost:8080',
        errors: []
    },
    computed: {
         isFormEmpty: function () {
             return !(this.user.name && this.user.password);
         }
    },
    methods: {
        onLogin: function () {
            this.errors = [];

            if (this.user.name.length < 6) {
                this.errors.push('El nombre de usuario tiene que tener al menos 6 caracteres');
            }

            if (this.user.password.length < 6) {
                this.errors.push('La contraseña tiene que tener al menos 6 caracteres');
            }
        }
    },
    filters: {
        uppercase: function (data) {
            return data && data.toUpperCase();
        }
    }
});</script></body>

</html>

## jsbin.hugotun.js
var app = new Vue({
    el: '#app',
    data: {
        user: { name: null, password: null },
        urlPasswordChange: 'http://localhost:8080',
        errors: []
    },
    computed: {
         isFormEmpty: function () {
             return !(this.user.name && this.user.password);
         }
    },
    methods: {
        onLogin: function () {
            this.errors = [];

            if (this.user.name.length < 6) {
                this.errors.push('El nombre de usuario tiene que tener al menos 6 caracteres');
            }

            if (this.user.password.length < 6) {
                this.errors.push('La contraseña tiene que tener al menos 6 caracteres');
            }
        }
    },
    filters: {
        uppercase: function (data) {
            return data && data.toUpperCase();
        }
    }
});
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Example templates</title>
	</head>

	<body>
	<div id="app" v-cloak>
	<h1>Bienvenido {{ user.name \| uppercase }}</h1>

	<div class="login-errors-container" v-if="errors.length !== 0">
	<ol class="login-errors">
	<li v-for="error in errors"> {{ error }}</li>
	</ol>
	</div>

	<form class="login" v-on:submit.prevent="onLogin">
	<div class="login-field">
	<label for="username">Nombre de usuario</label>
	<input id="username" type="text" v-model="user.name" />
	</div>

	<div class="login-field">
	<label for="password">Contraseña</label>
	<input id="password" type="password" v-model="user.password" />
	</div>

	<div class="login-field">
	<button type="submit" v-bind:disabled="isFormEmpty">Entrar</button>
	</div>
	</form>

	<a v-bind:href="urlPasswordChange" target="_blank">
	¿Has olvidado tu contraseña?
	</a>
	</div>

	<script src="node_modules/vue/dist/vue.js"></script>
	<script src="app.js"></script>
	<script id="jsbin-javascript">
	var app = new Vue({
	el: '#app',
	data: {
	user: { name: null, password: null },
	urlPasswordChange: 'http://localhost:8080',
	errors: []
	},
	computed: {
	isFormEmpty: function () {
	return !(this.user.name && this.user.password);
	}
	},
	methods: {
	onLogin: function () {
	this.errors = [];

	if (this.user.name.length < 6) {
	this.errors.push('El nombre de usuario tiene que tener al menos 6 caracteres');
	}

	if (this.user.password.length < 6) {
	this.errors.push('La contraseña tiene que tener al menos 6 caracteres');
	}
	}
	},
	filters: {
	uppercase: function (data) {
	return data && data.toUpperCase();
	}
	}
	});
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">var app = new Vue({
	el: '#app',
	data: {
	user: { name: null, password: null },
	urlPasswordChange: 'http://localhost:8080',
	errors: []
	},
	computed: {
	isFormEmpty: function () {
	return !(this.user.name && this.user.password);
	}
	},
	methods: {
	onLogin: function () {
	this.errors = [];

	if (this.user.name.length < 6) {
	this.errors.push('El nombre de usuario tiene que tener al menos 6 caracteres');
	}

	if (this.user.password.length < 6) {
	this.errors.push('La contraseña tiene que tener al menos 6 caracteres');
	}
	}
	},
	filters: {
	uppercase: function (data) {
	return data && data.toUpperCase();
	}
	}
	});</script></body>

	</html>