_37

导航

v-show

代码块(点击展开):
        <!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" />
        			{{showPic}}
        			<div v-show="showPic">
        				<img src="img/eclipse.png" >
        			</div>
        		</div>
        	</body>
        	
        	<script type="text/javascript">
        		var vm = new Vue({
        			el:"#app",
        			data:{
        				showPic:false,
        				showtext:"显示"
        			},
        			methods:{
        				toggle:function(){
        					this.showtext = (this.showtext = '显示'?'隐藏':'显示');
        					this.showPic = !this.showPic;
        				}
        			}
        		})
        	</script>
        </html>

posted on 2022-09-21 20:38  _37  阅读(38)  评论(0编辑  收藏  举报