v-if&v-show&v-for语句
v-if&v-show&v-for语句
下面是我的学习总结和示例
备注：
v-if和v-show的区别：
v-if隐藏状态下的内容块的代码是删除掉的，显示则是再次创建代码。而v-show是通过dsiplay的block/none来控制元素的显示
v-if条件语句：条件判断
要求：该对象默认为显示。点击按钮该对象为隐藏状态，再次点击则显示。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="box">
<p v-if="show">你看见我的召唤师了吗？？？</p>
<!-- 绑定单击事件 -->
<button @click="btns">btn</button>
</div>
<script>
new Vue({
el:"#box",
data:{
// 默认显示。为false则是默认隐藏
show:true
},
methods:{
btns:function(){
// 当前show(默认是true)不等于当前show(则是false)
this.show = !this.show;
}
}
})
</script>
</body>
</html>
效果：
v-show:控制DOM的显示与否
要求：该对象默认为显示。点击按钮该对象为隐藏状态，再次点击则显示。
备注：最终效果和v-if的一样
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="box">
<p v-show="show">HELLO WORLD</p>
<!-- 绑定单击事件 -->
<button @click="btns">按钮</button>
</div>
<script>
new Vue({
el:"#box",
data:{
// 默认显示。为false则是默认隐藏
show:true
},
methods:{
btns:function(){
// 当前show(默认是true)不等于当前show(则是false)
this.show=!this.show;
}
}
})
</script>
</body>
</html>
v-for:控制一组数据的。通过该组数据来控制循环显示一些DOM结构
要求：通过v-for在li遍历出文本和图片
备注：通过v-for来在页面打印出DOM的一些结构，可以省略不少代码
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环遍历出文本和图片</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<!-- 、、要求：通过v-for在li遍历出文本和图片 -->
<!-- :key可以提升渲染的性能可以使用item做为值 -->
<!-- :key要求每一项的数据都不能相同，可以在(item,index)后面加index下标，因此，:key的值也将是index,如果是频繁调用使用的话使用index做为值也不稳妥 -->
<div id="box">
<ul>
<!-- 循环遍历出文本 -->
<li v-for="(item,index) in list" :key="index">{{item}}</li>
<!-- 循环遍历出文本和图片 -->
<li v-for="item in li_img" style="width: 250px;height: 300px;float: left;margin: 10px 10px;">
<!-- 在img里面渲染图片 -->
<img src="" alt="" :src="item.img" style="width: 100%;height: 100%;">
<!-- 在span里面渲染文本 -->
<span>{{item.name}}</span>
</li>
</ul>
</div>
<script>
// 创建vue结构
new Vue({
el:"#box",
data:{
// 定义文本的数据组
list:[
1,2,3,4,5,6,7
],
// 定义文本和图片的数据组
li_img:[
{name:"1",img:'lol/1.png'},
{name:"2",img:'lol/2.png'},
{name:"3",img:'lol/3.png'},
{name:"4",img:'lol/4.jpg'},
]
}
})
</script>
</body>
</html>
效果：