码迷,mamicode.com
首页 > Web开发 > 详细

vue.js v-if 控制true/false

时间:2018-11-10 12:43:21      阅读:5284      评论:0      收藏:0      [点我收藏+]

标签:one   var   htm   function   opened   lse   none   index   分享   

通过v-if 控制true/false  可以使两个DIV隐藏显示切换

Html部分

技术分享图片
    <div id="index-content">
        <div>
            <a @click="showNewGoodsTab">点击板块一显示板块二隐藏</a>
            <a @click="showOftenRouteTab">点击板块二显示板块一隐藏</a>
        </div>
    </div>
        <!-- 包含两个板块的DIV -->
    <div class="mui-content">
        <!-- 板块一 -->
            <div v-if="new_goods_show">板块一</div>
        <!-- 板块二 -->
            <div v-if="often_route_show">板块二</div>
    </div>
View Code

Js部分

技术分享图片
                var pub_index_content = new Vue({
                    el:"#index-content",
                    data:{
                        new_goods_show:true,
                        often_route_show:false
                    },
                    methods: {
                        showNewGoodsTab: function() {
                            this.new_goods_show = true;
                            this.often_route_show = false;
                        },
                        showOftenRouteTab: function() {
                            this.new_goods_show = false;
                            this.often_route_show = true;
                        }
                    }
                })
View Code

 

vue.js v-if 控制true/false

标签:one   var   htm   function   opened   lse   none   index   分享   

原文地址:https://www.cnblogs.com/cp123/p/9938467.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!