首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue之v-show基本使用

vue之v-show基本使用

作者头像
兮动人
发布于 2021-06-11 12:48:02
发布于 2021-06-11 12:48:02
1.1K00
代码可运行
举报
文章被收录于专栏:兮动人的博客兮动人的博客
运行总次数:0
代码可运行

v-show:根据表达值的真假,切换元素的显示和隐藏

  • v-show 本质是切换元素的 display
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<body>
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow"><br>
        <img v-show="isShow" src="img/monkey.png" alt="">
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
        el: '#app',
        data: {
            isShow: false,
            age: 17
            },
            methods: {
                changeIsShow: function () {
                    this.isShow =! this.isShow;
                }
            }
        })
    </script>
</body>
  • 点击切换状态 显示/隐藏
  • 增加 age 累加效果
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<body>
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow"><br>
        <input type="button" value="累加年龄" @click="addAge">
        <img v-show="isShow" src="img/monkey.png" alt="">
        <img v-show="age>=18" src="img/monkey.png" alt="">
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
        el: '#app',
        data: {
            isShow: false,
            age: 17
            },
            methods: {
                changeIsShow: function () {
                    this.isShow =! this.isShow;
                },
                addAge: function () {
                    this.age++;
                }
            }
        })
    </script>
</body>
  • 当点击累加年龄时,就会出现 图片,因为默认给定的age=17,累加年龄后就会显示 图片
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/02/10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
在腾讯工作十年是什么体验
今天是我们「腾讯技术工程」公众号所属的腾讯技术工程事业群(Technology & Engineering Group,以下简称 TEG)的十岁生日。 TEG 是腾讯内部的技术支撑部门,有许多不同岗位的同学。在今天这个特殊日子,我们采访了 10 位,在 10 个不同岗位工作 10 年的同事,来分享一下他们从 2012 年进入鹅厂工作至今的一些感悟,希望能给大家带来一些启发。 Zoe 职位:产品运营 Q1、目前主要工作内容是? 我的工作主要是负责海外自营商店,解决海外用户充值购买公司业务的本地化需求
腾讯技术工程官方号
2022/05/18
1.8K0
在腾讯工作十年是什么体验
【人物志】技术十年:美团第一位前端工程师潘魏增
潘魏增,2006年毕业于南开大学电子系,2008年加入早期饭否团队。美团第一位前端工程师,现在是X项目组终端研发部的负责人。处女座,INTJ,喜欢Linux和Vim,崇尚开源,相信开源可以让世界变得更美好。
美团技术团队
2018/12/07
1.1K0
【人物志】技术十年:美团第一位前端工程师潘魏增
一个前端工程师的十年
十年之前,我还可以称自己是个少年,十年后只能摸摸自己的大肚腩。感慨颇深,走过熟悉的街头,人生又有多少个十年 。值此跨年之际,想给各位分享我做前端工程师的十年人生,希望对后浪们有所帮助。
疯狂的技术宅
2021/01/13
7730
2014年终总结——-我的匆匆这一年(面试,毕业季,工作)
看看自己上一次写博客的时间,到现在已经快有一年了,这一年自己毕业,走上社会,感悟人生,当自己意识到该写今年的年终总结的时候,却发现不知道该从什么地方开始写,该写些什么了。 还好,这一年让自己懂得不管什
我是攻城师
2018/05/11
7630
写了十年技术博客,我收获了什么
写技术博客这十年,让我感到最遗憾的事情是,有很多在我刚入行时候关注的觉得有价值的技术博客,作者都早已不再维护了,甚至域名呈现的内容都已经面目全非了。我还是希望在下一个十年我能继续走下去,对于我个人来说,好奇心在,表达欲就在。
ThoughtWorks
2021/02/08
5260
十年编程经验一朝面试被刷,技术面试如何提升表现?
又是一年金三银四,不同以往的是,当前的职场环境已经不再是那个双向奔赴的美好时代了。求职者在变多,HC 在变少,岗位要求还更高了,面对这样的困境,技术人员应该如何突围? 腾讯云开发者社区特邀前贝壳金服小微企业生态 CTO、腾讯云 TVP ,有着多年技术管理经验的史海峰老师,为大家分享了技术面试中的那些弯弯绕绕,分析了工程师面试通过率低现象背后的问题,并提出了 10 大提升面试表现的策略,希望能帮助大家,找到心仪的工作!
腾讯云开发者
2024/04/18
6770
十年编程经验一朝面试被刷,技术面试如何提升表现?
谷歌工作十年,我总结了这些工程师必备软技能
作者 | Addy Osmani 译者 | 辛晓亮 谷歌浏览器的一位高级工程经理,分享了他在谷歌工作十年时间里学到的一些软技能,下文为部分经验摘录。 批判性思考并提出合理的论点 批判性思维是使用认知技能独立思考以做出深思熟虑的决定的能力。投资于这项技能,以提高你的思路清晰。 作为工程师,我们有时会急于立即解决问题,因此感觉就像我们正在取得进展,或者看起来我们正在对利益相关者做出响应。如果我们没有充分考虑原因和后果,这可能会带来风险。换句话说,批判性思维是有目的地思考并形成自己的结论。这种以目标为导
深度学习与Python
2023/03/29
3180
谷歌工作十年,我总结了这些工程师必备软技能
未来十年
全世界对软件开发技术专家的需求仍在增长。有人一直说我们生活在泡沫之中,尽管在过去五年中,薪水同比增长了约10%。但出现了两个最违反直觉的事实。一方面,从计算机科学学校或培训班毕业的人比以往任何时候都高。另一方面,随着软件正在定义整个世界,人们会期望随着这些软件技术的进步编写定制软件的需求将越来越少。
用户5166556
2023/03/18
4741
未来十年
微软适合正青春的你吗?
注: 文章有些地方中英混杂,实属装(wu)13(nai),applogize in advance. 伴随着微软2015年又一轮大刀阔斧的裁员,小编在这里跟大家简单地聊一聊现在的微软。希望能够让大家从另一个角度观察一下这个曾经的业界霸主,为刚毕业的你在选择微软时提供一些参考意见。当然,小编希望力求客观,严肃活泼,娓娓道来。其中也不乏一些听来的段子,没有参考依据,一笑而过,不必太较真儿哈。 微软历史 微软这个公司的编年史小编在这里不想多说了,想必大家应该都听说过很多故事:它诞生于70年代,从90年代末全胜时
包子面试培训
2018/04/19
9930
语音AI革命十年,不忍看,不敢看!
过去10年彻底改变了人们对语音技术的看法。语音助手从最初的几家门店,发展到如今已融入人们生活的方方面面。为了概括十年来发生的一切,我们挑选了过去十年里每年发生的一件值得关注的事件,来突出和显示它们是如何在语音助手的发展和传播方面成为一个里程碑的。
新智元
2020/02/13
1.2K0
中国与发达国家工程师的全方位对比
产品的开发,说到底是人的问题。有什么样的工程师,就有什么样的产品。所以想先谈谈国外的工程师们。(注:这里的国外是指欧美发达国家) 真要把外国工程师介绍清楚还真不容易,因为外国工程师与中国工程师实在有
机器人网
2018/04/20
8630
中国与发达国家工程师的全方位对比
【测试十年】搜狗测试十年:战略思维(一)
两饿狼发现了一片草地,甲狼大喜。 乙狼不解:你又不吃草,高兴什么? 甲:羊爱吃啊,说完飞奔而去。 乙:你去哪儿? 甲:我要把这消息让羊知道呀! 这则故事启示我们,人与人最大区别不是视力上的差距,而是视野上的差距。视力可以看到一样的东西,视野却可以看到不同的世界。 如何扩大视野,发现那些常人熟视无睹的新世界呢?这就需要提升思维能力,而战略思维就是扩大视野的艺术。 注:以上内容引用自知乎文章<<如何培养提高战略思维能力?>>
用户5521279
2020/05/08
4890
【测试十年】搜狗测试十年:战略思维(一)
《纽约客》长文:Jeff Dean和他背后的男人
谷歌公司正处于空前的紧急状态。上一年10月,谷歌的核心系统停止了工作,这些系统通过在网络上“爬行”来构建“索引”(index)。尽管用户仍然可以在google.com上输入查询,但他们收到的结果已经过时5个月。
新智元
2018/12/25
6630
《纽约客》长文:Jeff Dean和他背后的男人
写了10年代码之后,我学到的7个绝对真理
导读:明年就是我的开发者生涯的第十个年头。整整十年!我有三分之二的时间都用在了 Web 开发上。在孩童时代,当其他小孩还在学习乐器或芭蕾舞的时候,我在自己的卧室里用代码编织了一个神奇的世界。
IT阅读排行榜
2019/07/17
5120
写了10年代码之后,我学到的7个绝对真理
未来10年,可能诞生的21个新工作
几千年来,工作对人类来说必不可少,以后也将始终如此。它不断变化,以适应我们所处的时代。未来10年,技术的结构性转变,尤其是自动化和人工智能(AI)的兴起,将催生我们以前想都不曾想到过的新工种。
钱塘数据
2018/07/27
3680
未来10年,可能诞生的21个新工作
我的十年创业路
虽然09年才毕业,但遥想08年第一次在学校和同学搞情侣合租房中介网站,距今已有10年。从捣鼓软件开发给别人做网站,到尝试建设完整的系统工程,再到去学习经营一个公司,创业路也走了整整十年,一路过来跌跌撞撞,有开心难过,有成功失败,还发生各种有趣和惊叹,更多的也有五味杂陈。
纯洁的微笑
2019/05/06
1.3K0
我的十年创业路
996的今天,还是技术最好的时代吗?| 专访刘江
刘江,腾讯云最具价值专家(TVP)创始委员,美团技术学院院长。曾任CSDN与《程序员》杂志总编,并兼任CSDN首席战略官。图灵公司联合创始人和创始总编。
TVP官方团队
2020/12/30
7140
谷歌基情实录:和Jeff Dean在同一台电脑上写代码
谷歌的伟大有一多半要归功于公司中亲密无间、协同工作的程序猿们!向伟大的猿类童鞋致敬!
大数据文摘
2018/12/25
9720
谷歌基情实录:和Jeff Dean在同一台电脑上写代码
GitHub 十年,感谢有你
本文是 GitHub 联合创始人兼 CEO:Chris Wanstrath 在计算机世界杂志写的文章。
非著名程序员
2018/07/30
8890
GitHub 十年,感谢有你
不要自称是程序员,我十多年的 IT 职场总结
如果我可以给每个工程教育增加一门课,它不会涉及编译器、门电路或是时间复杂度,而是一门介绍行业现实的入门课,因为没人教过这些,所以我们遭受了很多不必要的痛苦和折磨。希望本文可以成为年轻工程师职业生涯的自述文档( readme.txt)。目的是填补“现实世界”运作方式与教育之间的空白,并让你快乐起来。我从“一个还算聪明,但是不自信、毫无商业经验的工程师”,耗费了十年多的时间,经受了很多的苦难,才总结出这些经验之谈。我不会把这些当成金科玉律,但希望它可以告诉你一些大学职业中心没有告诉你的事情。
用户7657330
2020/08/14
7030
推荐阅读
相关推荐
在腾讯工作十年是什么体验
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验