search

Home  >  Q&A  >  body text

v-show able to hide but not show

Trying the v-show attribute, when set to false, the inline style display: none,

But when true is set, display: block will not be added;
Solve. . . 


<!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_lee2822 days ago743

reply all(7)I'll reply

  • 高洛峰

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

    You remove display:none from the style. . . . v-show itself can be set to show and hide.

    reply
    0
  • 淡淡烟草味

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

    Because it’s in your css code

    display:none

    v-show will only be added when hide

    display:none;

    It will be removed when displayed

    display:none;

    Will not be added

    display:block;

    reply
    0
  • 滿天的星座

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

    The principle of v-show is to control the display and hide by adding display: none, which is different from the traditional hide and show of jquery.

    reply
    0
  • 漂亮男人

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

    When set to true, it does not need to be display:block and it can also be displayed

    reply
    0
  • 滿天的星座

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

    See the source code

    reply
    0
  • 迷茫

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

    You are asking a question
    v-show is originally used to control the display and hiding.
    Just give it a value to control the display and hiding. 

       <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
            }
        },

    reply
    0
  • ringa_lee

    ringa_lee2017-05-16 13:38:49

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

    reply
    0
  • Cancelreply