1. v-if，v-else，v-else-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id ="first">
<!--1. 单独使用v-if：要带双引号-->
<h2 v-if="true">哈哈</h2>
<!--2. 从上向下执行 v-if v-else-->
<h2 v-if="isShow">{{message}}</h2><!--取js中代码-->
<h2 v-else>{{message}} not show</h2>
<!--3. v-if, v-else-if ,v-else-->
<h2 v-if="score>90">优秀</h2>
<h2 v-else-if="score>80">良好</h2>
<h2 v-else>及格</h2>
<!--4. 不建议在html中写太多的逻辑，可以放在函数中-->
<h2>{{getMark()}}</h2>
<!--5. 也 可以放在计算属性中-->
<h2>{{mark}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#first",
data:{
message:"你好",
isShow:true,
score:100,
},
methods:{
getMark(){
let message;
if(this.score>90){
message="优秀";
}else if(this.score>80){
message="良好";
}else{
message="及格";
}
return message;
}
},
computed:{
mark(){
let message;
if(this.score>90){
message="优秀";
}else if(this.score>80){
message="良好";
}else{
message="及格";
}
return message;
}
}
})
</script>
</body>
</html>
2. 切换账号-邮箱案列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="first">
<!--span标签：表明这是一块内容-->
<!--两个span中间不能加br,否则v-if和v-else就链接不起来-->
<span v-if="isUser">
<!--label for: 点击用户账号，就会锁定for对应的id的输入框-->
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱">
</span><br>
<button v-on:click="isUser= !isUser">切换账号</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#first",
data:{
isUser:true,
}
})
</script>
</body>
</html>
3. 账号切换引发的input复用及解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="first">
<!--vue内部 input的复用问题-->
<!--1. vue在渲染时候，先把页面所有的元素进行虚拟dom渲染，virtural DOM-->
<!--2. 发现下面两个label类似且互斥，则只在虚拟dom中渲染一个-->
<!--3. 引发的问题： 在用户账号中输入123，切换到邮箱后，email会出现123字样-->
<!--4. 解决方案：加key，从而使虚拟dom不认为这两个label是相同的，因此不会复用-->
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号" key="1">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱" key="2">
</span><br>
<button v-on:click="isUser= !isUser">切换账号</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#first",
data:{
isUser:true,
}
})
</script>
</body>
</html>
4. v-show VS v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "first">
<!--1. v-if: 当切换true和false时，该元素会从dom中创建或者删除-->
<h2 v-if="isUser" id="aaa">哈哈哈</h2>
<!--2. v-show：切换时该元素不会从dom中删除或创建，而是增加了行内样式
style="display:none;"-->
<h2 v-show="isUser" id="bbb">嘿嘿嘿</h2>
<!--3. 如何选择： 当频繁切换时，选择v-show，否则选择v-if -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#first",
data:{
isUser:true,
}
})
</script>
</body>
</html>
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
