JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<!-- EXERCISE 1: Store the title of a movie (e.g. "The Matrix") and when it was released in data properties and output them using string interpolation -->
<p>Title: {{ Title}} </p>
<p>Released: {{Released}} </p>
<!-- EXERCISE 2: Output whether or not the movie is old or new by using a method. The movie is old if it was released prior to year 2000. -->
<p>The movie is {{isMovieNew(Released)}}.</p>
<!-- EXERCISE 3: Bind the movie name to the "title" attribute on the following div element -->
<div>Hover your mouse here!</div>
</div>
JavaScript
new Vue({
el: '#app',
data: { Title:"The Matrix",
Released:1999
},
methods: {
isMovieNew: function(released){
if(released<2000) {
return ("This is an old movie")
} else {
return ("This is an new movie")
}
}
}
});