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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You remove display:none from the style. . . . v-show itself can be set to show and hide.
Because it’s in your css code
v-show will only be added when hide
It will be removed when displayed
Will not be added
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.
When set to true, it does not need to be display:block and it can also be displayed
See the source code
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.
display是根据你的便签属性来的，如果是块级元素如p,p,h标签，默认的就是display: block;如果是span等默认就是display:inline。所以隐藏的时候就是display：none,显示的时候去掉display：noneis its default attribute