学习心得,
条件渲染,
直接上代码了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--在 Vue 中，我们使用 v-if 指令实现同样的功能：-->
<div id="app-1">
<h1 v-if="ok">YES</h1>
<!--也可以用 v-else 添加一个“else 块”：-->
<h1 v-else>NO</h1>
</div>
<hr>
<!--在 <template> 元素上使用 v-if 条件渲染分组-->
<div id="app-2">
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
</div>
<hr>
<!--v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。-->
<div id="app-3">
<div v-if="Math.random() > 0.5">
现在你能看到我~
</div>
<div v-else>
现在你看不到我~
</div>
</div>
<hr>
<!--v-else-if-->
<div id="app-4">
<div v-if="type === 'A' ">
A
</div>
<div v-else-if="type === 'B' ">
B
</div>
<div v-else-if="type === 'C' ">
C
</div>
<div v-else>
NOT A/B/C
</div>
</div>
<hr>
<div id="app-5">
<template v-if="loginType === 'username'">
<label style="color: red;">用户名</label>
<input style="border: 1px solid red;" placeholder="输入用户名">
</template>
<template v-else>
<label >邮箱</label>
<input placeholder="输入邮箱">
</template>
<button v-on:click="clickme">{{msg}}</button>
</div>
<hr>
<!--这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可：-->
<!--注意，<label> 元素仍然会被高效地复用，因为它们没有添加 key 属性。-->
<div id="app-6">
<template v-if="loginType === 'username'">
<label style="color: red;">用户名</label>
<input style="border: 1px solid red;" placeholder="输入用户名" key="username-input">
</template>
<template v-else>
<label>邮箱</label>
<input placeholder="输入邮箱" key="email-input">
</template>
<button v-on:click="clickme">{{msg}}</button>
</div>
<hr>
<!--v-show-->
<h1 v-show="ok">Hello~</h1>
<!--不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。-->
<hr>
<!--一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；
如果在运行时条件很少改变，则使用 v-if 较好。-->
<!--v-if 与 v-for 一起使用-->
<!--当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。-->
<script>
//
var app1 = new Vue({
el:"#app-1",
data:{
ok:true
}
});
//
var app2 = new Vue({
el:"#app-2",
data:{
ok:true
}
});
//
var app3 = new Vue({
el:"#app-3"
});
//
var app4 = new Vue({
el:"#app-4",
data:{
type:"B"
}
});
//
var app5 = new Vue({
el:"#app-5",
data:{
msg:"点击切换输入方式",
loginType:"username"
},
methods:{
clickme : function(){
if(this.loginType==="username"){
this.loginType="email";
}else{
this.loginType="username";
}
}
}
});
//
var app6 = new Vue({
el:"#app-6",
data:{
msg:"点击切换输入方式",
loginType:"username"
},
methods:{
clickme : function(){
if(this.loginType==="username"){
this.loginType="email";
}else{
this.loginType="username";
}
}
}
})
</script>
</body>
</html>
