十日谈 : Vue的条件渲染案例
欢迎阅读我的Vue学习日记
登录切换的小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span v-if="isUser">
<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>
<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>
单击切换类型来实现账户输入和邮箱输入
演示结果:
Vue的虚拟DOM复用问题
我们发现,在input里面输入123,再切换类型之后,123仍然在input里面,这说明Vue内部为了效率的提升是支持模块复用的,那我们该如何解决这个问题呢.
使用key来单独的标识一个模块
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="请输入用户账号" key="username">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="请输入邮箱" key="email">
</span>
<button @click="isUser = !isUser">切换类型</button>
</div>
v-show
v-show与v-if相似,也决定一个元素是否渲染
v-if和v-show的区别:
1.v-if当条件为false时,压根不会有对应的元素出现在DOM中
而v-show当条件为false时,仅仅是将元素的display属性设置为none而已.
2.当需要显示与隐藏之间切片很频繁的时候,使用v-show
当只有一次切换时使用v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2 v-show="isShow">
{{message}}
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'Hello Vue',
isShow:true,
}
})
</script>
</body>
</html>
isShow改为false时,message的内容消失但是
内容并没有在DOM里面消失.,但是增加了style display且变为none
v-for遍历数组
v-for的语法类似于javaScript中的for 循环.
格式如下:item in items的形式
一个简单的案例
1.在遍历过程中不使用索引值:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'Hello Vue',
names:['why','kobe','james','curry']
}
})
</script>
</body>
</html>
2.在遍历过程中获取下标值
<div id="app">
<ul>
<li v-for="(item,index) in names">{{index+1}}.{{item}}</li>
</ul>
</div>
v-for遍历对象
1.在遍历对象的过程中,如果只是获取一个值,那么获取到的是value值
2.获取 key和 value(value,key)即可
3.获取index索引下标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<ul>
<li v-for="(value,key) in info">{{key}}-{{value}}</li>
</ul>
<ul>
<li v-for="(value,key,index) in info">{{index}}-{{key}}-{{value}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
info:{
name:'why',
age:18,
height:1.88
}
}
})
</script>
</body>
</html>
组件的key属性
key的作用主要是为了高效的更新DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters" :key="item">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
letters:['A','B','C','D','E'],
}
})
</script>
</body>
</html>
注意,key绑定的元素一定要和item是一一对应的关系,所以绑定item的效果要好于绑定index,index一直在变化,并不能起到提高效率的作用.
数组中哪些方法是响应式的
1.push() 方法可以做的响应式√
<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
letters:['a','b','c','d'],
},
methods:{
btnClick(){
//push
this.letters.push('aaa')
}
}
})
</script>
</body>
2.通过索引值修改数组中的元素无法做的响应式 ×
3.pop()方法可以做到响应式√
4.shift()方法可以做到响应式√
5.unshift()方法可以做的响应式√
6.splice()的作用:删除元素\插入元素\替换元素,可以做到响应式√
splice()第一个参数表示要长第几个数开始操作.
删除元素:第二个参数传入你要删除几个元素(如果没有传,就删除后面所有元素)
替换元素:第二个参数,表示我们要替换几个元素,后面是用于替换前面的元素.
插入元素:第二个参数,传入0,并且后面跟上要插入的元素.
7.sort()方法也是响应式的√
8.reverse()方法也是响应式的√