版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ZZY1078689276/article/details/83447878
v-for
- 作用：通常是根据数组中的元素遍历指定模板内容生成内容
- 预期：
Array | Object | Number | String - 参数属性
track-bystaggerenter-staggerleave-stagger
源码
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app">
<ul>
<!--list循环-->
<li v-for="item in list">{{item}}</li>
<hr>
<!--打印循环索引值,其中第一个参数是索引值，第二个参数是循环体内容-->
<li v-for="(index,item) in list">{{index}}-{{item}}</li>
<hr>
<!--map循环-->
<li v-for="item in map">{{item}}</li>
<hr>
<!--打印key值-->
<li v-for="(key,item) in map">{{key}}-{{item}}</li>
</ul>
</div>
</body>
<!--1、导入Vue的js文件 -->
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
var vm = new Vue({
el:'#app'
,data:{
list:[1,2,3]
,map:{
name:'zhangsan'
,age:'20'
,sex:'boy'
}
}
});
</script>
</html>
结果
分析
循环一为list循环，其是简单的list循环，其主要就是遍历循环中的每一项的值。
循环二也是list循环，循环二在简单的循环一的基础上添加了index元素索引值的展示，其第一项参数为index，第二项参数为item，它们之间的顺序不能颠倒，通过{{index}}-{{item}}，我们不仅仅能够展示元素本身的值，同时我们还能展示当前元素的索引值。
循环三为map循环，其主要是遍历了map元素中的值。
循环四也是map循环，其除了遍历map元素中的值之外，其还遍历了map中每一项的key，其中(key,item)中的顺序不能颠倒，第一个参数为key，第二个参数为该key所对应的item。
v-if
- 作用：根据表达式的值的真假条件来决定是否渲染元素，如果条件为false不渲染（达到隐藏元素的目的）为true则渲染。在切换元素及它的数据绑定被销毁并重建。
- 期望：
*
源码
<button @click="toggle">显示/隐藏</button>
<div v-if="isShow">Hello World 1</div>
<div v-show="isShow">Hello World 2</div>
var vm = new Vue({
el:'#app'
,data:{
isShow:true
}
,methods:{
toggle(){
this.isShow = !this.isShow;
}
}
});
结果
- 点击显示
- 点击隐藏
分析
从上图一可以看出，当点击显示时，被v-if和v-show标记的标签，其都能够正常的显示。
从图二中我们可以看出，当点击隐藏时，v-if标记的标签，其dom元素被彻底销毁，而被v-show标记的标签，其显示样式被标记为display: none;
v-show
- 作用：根据表达式的真假值，切换元素的display CSS属性，如果为false，则在元素上添加display：none来隐藏元素，否则移除display：none实现显示元素。
- 期望：
*
由于v-show中的代码已经写在了v-if中，所以说这里就不用重复编写了。
完整代码
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app">
<ul>
<!--list循环-->
<li v-for="item in list">{{item}}</li>
<hr>
<!--打印循环索引值,其中第一个参数是索引值，第二个参数是循环体内容-->
<li v-for="(index,item) in list">{{index}}-{{item}}</li>
<hr>
<!--map循环-->
<li v-for="item in map">{{item}}</li>
<hr>
<!--打印key值-->
<li v-for="(key,item) in map">{{key}}-{{item}}</li>
</ul>
<hr>
<button @click="toggle">显示/隐藏</button>
<div v-if="isShow">Hello World 1</div>
<div v-show="isShow">Hello World 2</div>
</div>
</body>
<!--1、导入Vue的js文件 -->
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
var vm = new Vue({
el:'#app'
,data:{
list:[1,2,3]
,map:{
name:'zhangsan'
,age:'20'
,sex:'boy'
}
,isShow:true
}
,methods:{
toggle(){
this.isShow = !this.isShow;
}
}
});
</script>
</html>