javascript - v-show 能够隐藏但不能显示
ringa_lee
ringa_lee 2017-05-16 13:36:49
0
7
732

在试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_lee
ringa_lee

ringa_lee

全部回复(7)
小葫芦

你把样式里的display:none 去掉。。。。v-show 本身就可以设置显示和隐藏的。

淡淡烟草味

因为你css代码里面

display:none

v-show只会在hide的时候添加

display:none;

而显示的时候会去除

display:none;

不会添加

display:block;
滿天的星座

v-show的原理是通过是否添加display:none控制显隐的,跟传统意义jquery的hide和show不同。

漂亮男人

设置为true时不需要是 display:block 同样也是能显示的

滿天的星座

看源码里

迷茫

你这问的有问题
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
            }
        },
左手右手慢动作

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板