搜尋

首頁  >  問答  >  主體

javascript - v-show 能夠隱藏但不能顯示

在試v-show屬性，當設為false的時候會加入行內樣式display：none，

但是設定true的時候，不會加上display：block；
求解。 。 。 


<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        p {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            display: none;
        }
    </style>
</head>
<body>

    <p id="vue" v-show="true"></p>
    <script type="text/javascript" src="vue.js"></script>
    <script>
        new Vue({
            el: "#vue",           
        })
    </script>
</body>
</html>
ringa_leeringa_lee2815 天前739

全部回覆(7)我來回復

  • 高洛峰

    高洛峰2017-05-16 13:38:49

    你把樣式裡的display:none 去掉。 。 。 。 v-show 本身就可以設定顯示和隱藏的。

    回覆
    0
  • 淡淡烟草味

    淡淡烟草味2017-05-16 13:38:49

    因為你css代碼裡面

    display:none

    v-show只會在hide的時候加入

    display:none;

    而顯示的時候會去除

    display:none;

    不會加

    display:block;

    回覆
    0
  • 滿天的星座

    滿天的星座2017-05-16 13:38:49

    v-show的原理是透過是否添加display：none控制顯隱的，跟傳統意義jquery的hide和show不同。

    回覆
    0
  • 漂亮男人

    漂亮男人2017-05-16 13:38:49

    設定為true時不需要是 display:block 同樣也是能顯示的

    回覆
    0
  • 滿天的星座

    滿天的星座2017-05-16 13:38:49

    看源碼裡

    回覆
    0
  • 迷茫

    迷茫2017-05-16 13:38:49

    你這問的有問題
    v-show本來就是控制顯示跟隱藏的
    給它一個值 控制顯示跟隱藏不就好了

       <ul v-show="show">
        <li @click="change($event)">哈哈哈</li>
        <li @click="change($event)">啦啦啦</li>
        <li @click="change($event)">嘻嘻嘻</li>
    </ul>
     data(){
            return{
           items:['1111','2222','3333'],
                show:true
            }
        },

    回覆
    0
  • ringa_lee

    ringa_lee2017-05-16 13:38:49

    display是根据你的便签属性来的，如果是块级元素如p,p,h标签，默认的就是display: block;如果是span等默认就是display:inline。所以隐藏的时候就是display：none,显示的时候去掉display：none就是它的預設屬性

    回覆
    0
  • 取消回覆