Vue.js part 7 - Methods and user input

scrimba

Watch in fullscreen

by Pedro Costa

About

Comments

Notes

Vue.js part 7 - Methods and user input

by Pedro Costa

Expand for more info

index.html

run

preview

console

<html>

<head>
	<script src="index.pack.js"></script>
</head>

<body>
	<div id="app">
		<h2>{{message}}</h2>
		<input type="text" v-model="message">
		<ul v-for="reminder in personalMessages">
			<li v-show="!reminder.secret">
				{{reminder.title}} - {{reminder.text}}
			</li>
			<li v-show="reminder.secret">
				******
			</li>
		</ul>
		<div>
			<a v-bind:href="scrimbaURL">{{scrimbaTitle}}</a>
		</div>
	</div>
</body>

</html>

<style>
	.vue {
		color: blue;
	}
	.scrimba {
		color: red;
	}
</style>

<html>

<head>

</head>

<body>

<h2>{{message}}</h2>

{{reminder.title}} - {{reminder.text}}

</li>

******

</li>

</ul>

<div>

<a v-bind:href="scrimbaURL">{{scrimbaTitle}}</a>

</div>

</body>

</html>

<style>

.vue {

color: blue;

}

.scrimba {

color: red;

}

</style>

›

"Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools"

›

"You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html"

-6:37