显示与隐藏

淩亂°似流年 2022-06-04 08:07 303阅读 0赞

# [vueJS简单的点击显示与隐藏的效果][vueJS] #

目前前端框架太多，接触过angular、ember，现在开始倒腾vue

此处用到v-if、v-else、v-show，v-if或让元素不在DOM上，v-show只是改变display:block属性，感觉v-if好

感觉跟适合、

演示效果:[http://wjf444128852.github.io/demo/myVue/demo/demo9.html][http_wjf444128852.github.io_demo_myVue_demo_demo9.html]

![复制代码][copycode.gif]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-if、v-else、v-show</title>
        <script src="../js/vue.js"></script>
        
    </head>
    <body>
        <div id="app">
            <p v-if="willShow">显示显示显示</p>
            <p v-else>隐藏隐藏隐藏隐藏</p>
            <button @click="fn()">改变</button>
        </div>
        <script>
            var vm=new Vue({
                el:"#app",
                data:{
                    willShow:true
                },
                methods:{
                    fn:function(){
                        if(this.willShow==true){
                            this.willShow=false;
                        }else{
                            this.willShow=true
                        }
                    }
                }
            });
        </script>
    </body>
    </html>

[vueJS]: http://www.cnblogs.com/-walker/p/5442723.html
[http_wjf444128852.github.io_demo_myVue_demo_demo9.html]: http://wjf444128852.github.io/demo/myVue/demo/demo9.html
[copycode.gif]: /images/20220604/1c76dda5330f42eda5a8221fe6ee3504.png

发表评论取消回复

表情：

评论列表（有 0 条评论，303人围观）

还没有评论，来说两句吧...

相关阅读

相关显示隐藏文件和显示隐藏扩展名

显示隐藏文件、扩展名 \`缺点：要手刷新一下，才能看到效果\` XP 隐藏和显示：文件显示和隐藏：扩展名 WIN10

￡神魔★判官ぃ/ 2022年12月31日 04:26/ 0 赞/ 196 阅读

相关隐藏菜单显示

![请添加图片描述][cd91319d26304196a55a51ee69dbe57c.gif] <!DOCTYPE html> <html lang="en

谁借莪１个温暖的怀抱￠/ 2022年09月01日 13:59/ 0 赞/ 228 阅读

相关键盘的隐藏与显示

键盘的隐藏： import android.view.inputmethod.InputMethodManager; private void

妖狐艹你老母/ 2022年08月06日 08:24/ 0 赞/ 217 阅读

相关显示与隐藏

[vueJS简单的点击显示与隐藏的效果][vueJS] 目前前端框架太多，接触过angular、ember，现在开始倒腾vue 此处用到v-if、v-else、v-sh

淩亂°似流年/ 2022年06月04日 08:07/ 0 赞/ 304 阅读

相关 js实现显示与隐藏

总结如下： 1.jQuery中隐藏元素的hide方法让页面上的元素不可见，一般可以通过设置css的display为none属性。但是通过css直接修改是静态

亦凉/ 2022年05月26日 08:15/ 0 赞/ 1103 阅读

相关 js_元素的隐藏与显示

1. 隐藏显示 display:none visibility:hidden 都是隐藏的意思，但是前者相当于从html中去掉了标签，而后者只是不显示，但是还是占着相应的位

深藏阁楼爱情的钟/ 2022年05月25日 05:44/ 0 赞/ 241 阅读

相关显示与隐藏效果

显示与隐藏效果开发工具与关键技术：DW、显示与隐藏效果作者：黄桂康撰写时间：2019.02.20 本篇介绍下拉框的效果，它只要是两个盒子，一个

谁借莪１个温暖的怀抱￠/ 2022年03月18日 11:17/ 0 赞/ 292 阅读

相关 input 密码显示与隐藏

H5隐藏密码与显示 HTML <div class="weui-cell__bd new_password"> <input clas

深藏阁楼爱情的钟/ 2022年01月19日 01:59/ 0 赞/ 482 阅读

相关 div 显示与隐藏

最近写项目用到DIV隐藏,以下引用[http://www.cnblogs.com/dotLive/archive/2007/04/04/699302.html][http_ww

我不是女神ヾ/ 2021年12月17日 15:45/ 0 赞/ 442 阅读

相关 Bootstrap 页面元素隐藏与显示

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

快来打我*/ 2021年07月04日 23:23/ 0 赞/ 658 阅读