鍍金池/ 問答/HTML/ vue2.0 未定義 哪個(gè)牛人幫助一下,謝謝

vue2.0 未定義 哪個(gè)牛人幫助一下,謝謝

明明data 里定義了show,但是報(bào)錯(cuò)顯示未定義
header.vue組建里的template

clipboard.png
script

clipboard.png

報(bào)錯(cuò)

clipboard.png

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">粥品香坊(大運(yùn)村)</span>
        <p class="arr"><span>蜂鳥專送</span>/<span>38分鐘送達(dá)</span></p>
        <div class="charge"><i class="icon"></i><span>在線支付滿28減5,滿50減10</span></div>
        <div class="go_left"><span>5個(gè)</span><i class="icon-keyboard_arrow_right"></i></div>
     </div>
 </div>
 <div  class="description">
     <i class="img"></i>
     <span class="text">粥品香坊其烹飪粥料的秘方源于中國千年古法,再融和現(xiàn)代制作工藝</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>

回答
編輯回答
挽歌

你試試v-if,v-model這些指令,或者直接用雙大括號把它顯示在頁面上,又或者你另外定義一個(gè)變量,總之可以有很多種方式來排除;因?yàn)榈谝谎劭瓷先ゴa每什么問題,你要么多貼一點(diǎn)代碼,要么只能自己慢慢排除了。

2018年3月25日 14:08
編輯回答
枕邊人

很基礎(chǔ)的js,show語法錯(cuò)誤,分號去掉

data() {
  return {
    show: false
  }
}
2018年7月9日 15:47
編輯回答
你好胸

報(bào)錯(cuò)提示沒有在實(shí)例中定義show屬性,沒有發(fā)現(xiàn)你定義vue實(shí)例,正確的寫法如下:

var app = new Vue({
    el: '.details',
    data: {
        show: false
    }
})
2018年1月11日 23:41