Vue基础 第五讲笔记:v-show、v-if、v-bind

一、v-show

根据真假切换元素的显示状态。

注意:
1、原理是修改元素display,实现显示隐藏。
2、指令后面的内容,最终都会解释为布尔值。
3、值为true元素显示,值为false元素隐藏。

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="切换显示状态" @click="changeIsShow">
			<img v-show="isShow" src="img/zhongqiu.jpg" alt="">
			<input type="button" value="增加年龄" @click="addAge">
			<img v-show="age>=18" src="img/zhongqiu.jpg" alt="">
		</div>
		<!-- 导入开发版本的Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
   
				el:"#app",
				data:{
   
					isShow:

你可能感兴趣的:((HM)Vue,javascript,vue.js,html5)