1 v-if使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if使用</title>
</head>
<body>
<div id="app">
<h2 v-if="false"> {{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
message: "你好"
}
})
</script>
</body>
</html>
2 v-if和v-else使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if和v=else使用</title>
</head>
<body>
<div id="app">
<h2 v-if="false"> {{message}}</h2>
<h2 v-if="isShow">
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
</h2>
<h1 v-else>isshow为false时，显示我</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
isShow:false
}
})
</script>
</body>
</html>
3 v-if和v-else-else使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2> {{message}}</h2>
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>
<h1>{{result}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
message: "你好",
score:65
},computed:{
result(){
let showMessage='';
if(this.score>=90){
showMessage='优秀'
}else if(this.score>=80){
showMessage='良好'
}else if(this.score>=60){
showMessage='及格'
}else {
showMessage='不及格'
}
return showMessage;
}
}
})
</script>
</body>
</html>
4 用户登录切换案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录切换案例</title>
</head>
<body>
<div id="app">
<span v-if="isUser"> <label for="username"> 用户名称:</label>
<input type="text" id="username" placeholder="用户名称">
</span></span>
<span v-else>
<label for="email"> 用户邮箱:</label>
<input type="text" id="email" placeholder="用户邮箱">
</span>
<button @click="isUser=!isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
isUser: true
}
})
</script>
</body>
</html>
5 用户登录切换input案例
<input type="text" id="username" placeholder="用户名称" key="username">
使用key来解决，保证key不同就可以清空上个input的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录切换input案例</title>
</head>
<body>
<div id="app">
<span v-if="isUser"> <label for="username"> 用户名称:</label>
<input type="text" id="username" placeholder="用户名称" key="username">
</span></span>
<span v-else>
<label for="email"> 用户邮箱:</label>
<input type="text" id="email" placeholder="用户邮箱" key="email">
</span>
<button @click="isUser=!isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
isUser: true
}
})
</script>
</body>
</html>
6 v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-v-show的使用</title>
</head>
<body>
<div id="app">
<h2 v-if="isShow"> {{message}}</h2>
<h2 v-show="isShow"> {{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
message: "你好",
isShow: true
}
})
</script>
</body>
</html>
网友评论