如何利用Vue.js库中的v-show显示和隐藏元素

Question

如何利用Vue.js库中的v-show显示和隐藏元素

Answer 1

v-show是通过其值为true或者false来决定所包含的元素是否显示。举例如下：HTML：123<div&nbsp;id="app">&nbsp;&nbsp;&nbsp;&nbsp;<p&nbsp;v-show="ok">123</p></div>JavaScript（Vue）：123456var&nbsp;vm&nbsp;=&nbsp;new&nbsp;Vue({&nbsp;&nbsp;&nbsp;&nbsp;el:&nbsp;'#app',&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ok:&nbsp;true&nbsp;&nbsp;&nbsp;&nbsp;}});默认情况下运行结果会在页面上显示这个p元素，也就是会出现123字符串。当我们在控制台中使用vm.ok = false;将其值设置为false后。123字符串将立即消失，即p元素被隐藏了。&nbsp;本回答被提问者采纳v-show是通过其值为true或者false来决定所包含的元素是否显示。举例如下：HTML：123<div&nbsp;id="app">&nbsp;&nbsp;&nbsp;&nbsp;<p&nbsp;v-show="ok">123</p></div>JavaScript（Vue）：123456var&nbsp;vm&nbsp;=&nbsp;new&nbsp;Vue({&nbsp;&nbsp;&nbsp;&nbsp;el:&nbsp;'#app',&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ok:&nbsp;true&nbsp;&nbsp;&nbsp;&nbsp;}});默认情况下运行结果会在页面上显示这个p元素，也就是会出现123字符串。当我们在控制台中使用vm.ok = false;将其值设置为false后。123字符串将立即消失，即p元素被隐藏了。&nbsp;