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

 我来答
懿灬芫
2018-04-11 · TA获得超过7190个赞
知道小有建树答主
回答量:23
采纳率:0%
帮助的人:6652
展开全部

步骤:

  1. 创建静态页面vshow.html,并修改title内容“Vue.js之v-show指令”,如下图所示:

  2. 引入Vue.js中的JavaScript文件,注意引入js的位置,如下图所示:

  3. 在body元素内部插入一个div,div标签内部插入三个p元素,分别加上v-if、v-else和v-show,如下图所示:

  4. 在div标签下方插入<script></script>元素,并在里面添加Vue.js代码,如下图所示:

  5. 预览该静态页面,这时会发现显示内容,如下图所示:

  6. 第六步,将local属性值改为“false”,再次预览该页面,如下图所示:

Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。

张恺阳
2017-05-07 · 知道合伙人软件行家
张恺阳
知道合伙人软件行家
采纳数:166 获赞数:532
开发过各种类型网站及APP等,如有相关问题可以随时向我提问。

向TA提问 私信TA
展开全部

v-show是通过其值为true或者false来决定所包含的元素是否显示。举例如下:

HTML:

<div id="app">
    <p v-show="ok">123</p>
</div>

JavaScript(Vue):

var vm = new Vue({
    el: '#app',
    data: {
        ok: true
    }
});

默认情况下运行结果会在页面上显示这个p元素,也就是会出现123字符串。

当我们在控制台中使用vm.ok = false;将其值设置为false后。123字符串将立即消失,即p元素被隐藏了。

本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式