Skip to content
This repository was archived by the owner on May 24, 2019. It is now read-only.

HTML Binding

Jump to bottom
Pascal edited this page Aug 25, 2017 · 3 revisions

https://github.com/oanstein/VueJS-Complete-Guide-Code/tree/master/01_dom_interaction/02_html_binding

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div id="app">
    <input type="text" v-on:input="cssClass = $event.target.value" />
    <p :class="cssClass">Class: {{ cssClass }}</p>
    <p><a :href="link">Google</a></p>
  </div>

  <script src="https://unpkg.com/vue"></script>
  <script src="main.js"></script>
</body>
</html>

main.js

new Vue({
  el: '#app',
  data: {
    cssClass: '',
    link: 'http://google.com'
  }
});

style.css

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

Index

Clone this wiki locally