vue(5)v-if与v-show的区别应用

v-if如果是false就不生成,v-show如果是false会生成display:none样式的元素。那v-show在什么场景嘞?在隐藏时候用

实例代码

CLICK ME
      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="utf-8" />
      		<title></title>
      		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
      	</head>
      <body>
      	<div id="app">
      		<input v-on:click="toggle" v-bind:value="showtext" type="button"/>
      		<div v-show="showPic">
      			<img src="img/1.png" >
      		</div>

      	</div>
      </body>

      <script>

      	var vm = new Vue({
      		el:"#app",
      		
      		data:{
      			showPic:false,
      			showtext:"显示"
      		},
      		methods:{
      			toggle:function(){
      				this.showtext=(this.showtext=='显示'?'隐藏':'显示')
      				this.showPic=!this.showPic;
      			}

      		},
      	})
      	

      </script>

      </html>

效果

posted @ 2022-09-19 20:33  冥天肝  阅读(20)  评论(0编辑  收藏  举报