Interpolate JavaScript Expressions in Vue
We'll see how to signal to Vue that a string should be considered as JavaScript to be interpolated. We do this with double curly braces ({{ }}). We'll also see that we can access data properties that have been used into Vue during configuration.
While we are in between curly braces, we can do anything that JavaScript can do! Whether you want to manipulate the string to look how you'd like, conditionally render something based on the data you get, or anything else... it's up to you!
Instructor: [0:00] So far, we've been able to show a single variable in Vue using the double curly braces for interpolation. This is the signal to Vue that what's in between the curly braces needs to be evaluated, and this can be a JavaScript statement.
[0:15] At the moment, it's title, but if I change that to title, to uppercase, for example, then, my rendered Vue changes the data to be uppercase. However, the underlying data prop hasn't changed. The data prop is getting to here is being transformed to uppercase and has been rendered to the browser.
[0:38] Equally, we could split it into different letters, and then we could join them together with some dashes. We get this weird thing here which says, comedy events. Again, what rendered has been transformed within this expression, but hasn't changed the underlying data. Within these braces, we can also use ternary operations.
[1:01] Let's give ourselves a numerical variable to help us out. Let's call it, tickets. We can see that tickets has appeared as a prop within our data object, and if we go back over here, say, we wanted to add, there are zero tickets left. Actually, I would like it to say, there are no tickets left when it's zero.
[1:24] Instead of this {{tickets}}, I'm going to say, if tickets is equal to zero, then print the string, no. Otherwise, just print the ticket's number. There are no tickets left, and we can change the prop here, there are four left.
[1:42] This data could get changed anywhere on our app. We could have another function call it, changing it. We can change the incoming data that's arriving. Again, that's coming from here. We can see it in the DevTools. It's being evaluated here. Does tickets equal zero? It doesn't, then we show how many tickets there are.
[2:01] As long as a single expression evaluates to a single value, then we can put whatever we would like inside these curly braces. A random number. I could put today's date, any JavaScript expression that evaluates to a single value, I'm allowed to put in these curly braces. It will be evaluated before it gets to the browser.