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: {{ movieTitle }}</p>
<p>Released: {{ releaseYear }}</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 title="sfsdfsdf">The movie is {{ isMovieOld(releaseYear) ? 'old' : 'new' }}.</p>
<!-- EXERCISE 3: Bind the movie name to the "title" attribute on the following div element -->
<div v-bind:title="movieTitle">Hover your mouse here!</div>
</div>
<div title="fsdf">
dadasdasd
</div>
JavaScript
new Vue({
el: '#app',
data: {
movieTitle: 'The Matrix',
releaseYear: 1999
},
methods: {
isMovieOld: function(releaseYear) {
return this.releaseYear < 2000;
}
}
});