vuejs
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
A Flavor of Directives. 13<br />
Info<br />
An element with v-show will always be rendered and remain in the DOM. v-show simply<br />
toggles the display CSS property of the element.<br />
1 You must send a message for help!<br />
2 <br />
3 <br />
4 Send word to allies for help!<br />
5 <br />
What we want to accomplish in this example, is to toggle different elements. In this step, we need<br />
to hide the warning inside the h1 tag, if a message is present, otherwise hide the message by setting<br />
its style to **display: none.<br />
3.2 v-if<br />
In this point you might ask ‘What about the v-if directive we mentioned earlier?’, so we will build<br />
the previous example again, only this time we’ll use v-if!<br />
1 <br />
2 <br />
3 Hello Vue<br />
4 <br />
5 <br />
6 <br />
7 You must send a message for help!<br />
8 <br />
9 <br />
10 Send word to allies for help!<br />
11 <br />
12 <br />
13 {{$data | json}}<br />
14 <br />
15 <br />
16 <br />
17 <br />
18 <br />
19 new Vue({<br />
20 el: '#app',