Displaying, Looping, Searching, and Filtering Data Chapter 2
The difference between the two is v-if alters the markup, removing and adding HTML
elements as required, whereas v-show renders the element regardless, hiding and showing
the element with inline CSS styles. v-if is much more suited to runtime renders or
infrequent user interactivities as it could potentially be restructuring the whole page. v-
show is favorable when lots of elements are quickly coming in and out of view, for
example, when filtering!
When using v-show with a method, the function needs to return just a true or false. The
function has no concept of where it is being used, so we need to pass in the current person
being rendered to calculate if it should be shown.
Create a method on your Vue instance titled filterRow() and inside, set it to return
true:
filterRow(person) {
return true;
}
The function takes one parameter, which is the person will we pass in from though from
the HTML. In your view, add the v-show attribute to the
the value while passing in the person object:
<table>
<tr v-for="person in people" v-show="filterRow(person)">
<td>{{ person.name }}</td>
...
As a simple test, return the isActive value to the person. This should instantly filter out
anyone who is inactive, as their value will return false:
filterRow(person) {
return person.isActive;
}