Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vue is so easy but still powerful!
<!DOCTYPE html>
<html>
<head>
<title>Vue is cool!</title>
<style>
textarea {
width: 100%;
}
.message {
white-space: pre;
font-family: Courier;
background: black;
color: lightgray;
}
button {
width: 100%;
padding: 4px;
}
</style>
</head>
<body>
<h1>Vue Demo</h1>
<div id="app">
<textarea rows="10" v-model="message" ></textarea>
<button @click="clearInput">Clear input</button>
<b>Your input:</b>
<div v-if="message" class="message">{{message}}</div>
<div v-else>Please give us some input to display.</div>
</div>
<script src="https://vuejs.org/js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: ({
message: null
}),
methods: {
clearInput() {
this.message = null;
}
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment