如何利用Vue.js库中的v-show显示和隐藏元素?
步骤:
创建静态页面vshow.html,并修改title内容“Vue.js之v-show指令”,如下图所示:
引入Vue.js中的JavaScript文件,注意引入js的位置,如下图所示:
在body元素内部插入一个div,div标签内部插入三个p元素,分别加上v-if、v-else和v-show,如下图所示:
在div标签下方插入<script></script>元素,并在里面添加Vue.js代码,如下图所示:
预览该静态页面,这时会发现显示内容,如下图所示:
第六步,将local属性值改为“false”,再次预览该页面,如下图所示:
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。
另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。