vue2.0 未定义 哪个牛人帮助一下，谢谢

Question

明明data 里定义了show，但是报错显示未定义
header.vue组建里的template

script

报错

header.vue 的源码

<template>
<div class="header">

 <div class="header_wrap">
     <div class="avatar">
         <img width='64' height="64" src="http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg" alt="">
     </div>
     <div class="right">
        <i class="pics"></i><span class="text">粥品香坊（大运村）</span>
        <p class="arr"><span>蜂鸟专送</span>/<span>38分钟送达</span></p>
        <div class="charge"><i class="icon"></i><span>在线支付满28减5，满50减10</span></div>
        <div class="go_left"><span>5个</span><i class="icon-keyboard_arrow_right"></i></div>
     </div>
 </div>
 <div  class="description">
     <i class="img"></i>
     <span class="text">粥品香坊其烹饪粥料的秘方源于中国千年古法,再融和现代制作工艺</span>
     <i class="icon-keyboard_arrow_right"></i>
 </div>
 <div class="background"><img src="http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg" alt=""></div>
 <div v-if="show" class="details">
     
 </div>

</div>
</template>
<style lang="scss">
@import '../../common/style/mixin.scss';
@import '../../common/style/font.css';

.header{
    position: relative;
    background: rgba(7,17,27,0.5);
    overflow: hidden;
    .header_wrap{
        padding:24px 12px 18px 24px;
        word-wrap: -6px;
        display: inline-table;
        .avatar{
            vertical-align: top;
            display: inline-block;
            img{
                border-radius: 2px;
            }
        }
        .right{
            position: relative;
            display: inline-block;
            margin-left: 16px;
            .pics{
                @include bg-img(brand,100%,100%);
                width:30px;
                height: 18px;
                display: inline-block;
                vertical-align: top;
            }
            .text{
                margin-left:6px;
                color:rgb(255,255,255);
                font-size: 16px;
                font-weight: bold;
                line-height: 18px;
            }
            .arr{
                font-size: 12px;
                color:rgb(255,255,255);
                font-weight: 200;
                line-height: 12px;
                margin: 8px 0 10px 0;
            }
            .charge{
                i{
                    @include bg-img(decrease_1,100%,100%);
                    width:12px; 
                    height:12px;
                    display: inline-block;
                    vertical-align: bottom;
                }
                span{
                    font-size: 10px;
                    margin-left: 4px;
                    color:white;
                    font-weight: 200;
                    line-height: 12px;
                }
            }
            .go_left{
                display: inline-block;
                position: absolute;
                right: -70px;
                top: 39px;
                background: rgba(0,0,0,.2);
                height: 24px;
                border-radius: 8px;
                color:rgb(255,255,255);
                span{
                display: inline-block;
                font-weight: 200;
                font-size: 10px;
                line-height: 24px;
                padding:0 8px;
                }
                i{
                   margin-left: 2px; 
                   height:24px;
                   line-height: 24px;
                   display: inline-block;
                   vertical-align: top;
                   font-size: 16px;
                }
               }
        }
    }
    .description{
        height: (56px / 2);
        padding:0 12px;
        color:rgb(255,255,255);
        word-spacing: -6px;
        display: inline-table;
        background: rgba(7,17,27,0.2);
        .img{
            vertical-align: top;
            display: inline-block;
            margin-top:((28px - 12px) /2 );
            width:22px;
            height: 12px;
           @include bg-img(bulletin,100%,100%);
        }
        span{
            vertical-align: top;
            display: inline-block;
            font-size:10px;
            font-weight: 200;
            line-height: (56px / 2);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
           width:308px; 
           margin-left:4px;
        }
        .icon-keyboard_arrow_right{
            vertical-align: top;
            margin-top:7px;
            display: inline-block;
        }
    }
    .background{
        img{
        position: absolute;
        top:0;
        left:0;
        height: 100%;
        width:100%;
        filter: blur(10px);
        z-index: -1;
        }
    }
    .details{
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height: 100%;
        background: rgba(7,17,27,0.8);
        filter: blur(10px);
        
    }
}

</style
<script type="text/ecmascript-6">
export default {

data () {
       show:false
},

};
</script>

Answer 1

很基础的js，show语法错误，分号去掉

data() {
  return {
    show: false
  }
}

Answer 2

报错提示没有在实例中定义show属性，没有发现你定义vue实例，正确的写法如下：

var app = new Vue({
    el: '.details',
    data: {
        show: false
    }
})

Answer 3

你试试v-if，v-model这些指令，或者直接用双大括号把它显示在页面上，又或者你另外定义一个变量，总之可以有很多种方式来排除;因为第一眼看上去代码每什么问题，你要么多贴一点代码，要么只能自己慢慢排除了。