FREELessons: 10Length: 51 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Interpolating Expressions

In this lesson, you will build on what you learned in the last lesson as you learn how to use the Vue syntax to display JavaScript expressions.

Useful Links

2.4 Interpolating Expressions

Hello and welcome back, in our last lesson, we discussed how we can use text interpolation to show data from our JavaScript in our website. We created this data object, and we've added a couple of properties to that data object. And we can now point to those properties in our HTML to show the data that's in those properties. Well, in this lesson, I wanna talk a little bit more about text interpolation, using this mustache syntax. And we're gonna talk about using expressions inside our curly braces here. So instead of just pointing to one of these properties, we could do something instead. Well, first of all, let's go ahead and create a fork of our page. So you can find the URL for our starting point here and the course notes for this lesson. And it's the same page we ended up with at the end of the last lesson. So we're gonna open that up and fork it to create a new copy. And in our new copy, let's take a look at our title. So instead of just pointing to a property in our data object, let's try something different. Instead, I'm just gonna do 8 + 4, and you'll see that it actually works, it adds 8 and 4 together and it spits out the output. So again, we can put more than just data properties inside our curly braces here. We can put expressions, so we could also, if we wanted to, we could put title + and then we could add some more text to it. So we could say space #2, and then when our title renders, it shows Timmy's Diner #2. We could even make this expression a little more complex if we wanted to. Let's say we had another property in our data object called, isNumberTwo. And we're gonna set it equal to true, so this is a boolean property here. And inside our title, I'm gonna point to that property, so IsNumberTwo. And I'm gonna use a ternary operator here. So we're gonna say IsNumberTwo, and that's gonna return true or false. If it's true, then we're gonna say title +, and then inside quotation marks, #2. Otherwise, we're gonna have a colon there for the else, else we're just gonna say title. And we see that since isNumberTwo is set to true, it runs the first of these two expressions. Now, if you've never used a ternary operator before, you might be a little confused here. The way that works is it basically just works like an if else statement. So we have a boolean here, we're checking to see if something is true or false, and then we have a question mark. If this statement turns out to be true, then it runs whatever is directly after the question mark. If it ends up being false, then it runs whatever is after the colon, over here at the end. And since it's set to true, it's running this first expression here. Now, if we were to change this to false, then you'll see that the number two at the end goes away. So we can get pretty complicated here with our expressions. Let's say, for some reason, for our subtitle,we wanted the same thing, but we wanted all of the letters in reverse. So we could do that using an expression inside our curly braces here. We could point to the subtitle and then do a split on that subtitle. So it's gonna split that up into an array of letters. Then we're gonna do a reverse on that array by typing .reverse(), and then we're gonna join them back together. As you can see, when we reverse it, it just turns the order of that array around. And then we'll just join it back together with the .join() method. So .join, open and close parenthesis there, and there we go, so now we've got it in reverse. So there's a lot we can do with these expressions here. I'm just gonna get rid of all that because it's kind of ridiculous, but there we go. So it's important to understand that you can do more than just show property names inside our curly braces here for this text interpolation. We can use full JavaScript expressions, as long as we understand that we cannot use JavaScript statements. We can't set a variable equal to something, for example, inside here, we can just use expressions. If you were to try to turn this here into an actual if statement, then that wouldn't work. You could use a ternary expression, but you can't use a full if statement here. But again, those are the basics of using expressions in Vue.js. Thank you for watching, and I'll see you in the next lesson.

Back to the top