搜索

首页  >  问答  >  正文

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 天前738

全部回复(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
  • 取消回复