2--vue基本指令2-条件渲染指令、列表渲染指令
条件渲染指令
v-if指令 用于"条件性地"渲染一块内容。这块内容只会在指定的表达式“返回 真 值”的时候被渲染。
v-if 条件渲染指令
v-if="条件表达式"
v-if指令： 通过控制dom元素的存在或不存在。---控制元素是否存在或不存在。
(1) v-if="isLogin"中的值 isLogin 是true 真的时候，元素在dom中存在。
(2) v-if="isLogin"中的值 isLogin 是false 假的时候，元素在dom中不存在。
例如1：
html:
<div id="wrap"> <p v-if="isLogin">已登录</p> <p v-else>未登录</p> </div>
vuejs:
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
// el模板选择器
el:'#wrap',
// 数据中心
data:{
isLogin:true
},
// 方法中心
methods:{
}
})
</script>例如2：
html：
<div id="app"> <p> <input type="checkbox" name="" id="" v-model="agreement">同意接收协议 <br> <!-- v-if指令 用于 条件性地 渲染一块内容。 --> <span v-if="agreement==false">请先接收协议</span> <br> <button v-if="agreement==true">注册</button> </p> </div>
vuejs：
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
agreement:false,
},
methods:{
}
})
</script>预览效果如下所示:
勾选复选框前：
勾选复选框后：
v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。
html:
<div id="wrap"> <p v-show="isLogin==true">已登录</p> <p v-show="isLogin==false">未登录</p> <p v-show="type==='科技'">史上最大设计变化！安卓12让你眼前一亮</p> </div>
vuejs:
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
// el模板选择器
el:'#wrap',
// 数据中心
data:{
isLogin:true,
type:'科技'
},
// 方法中心
methods:{
}
})
</script>预览：
V-if和v-show的区别？
v-if通过控制dom节点的方式，添加和删除元素，进而实现显示或隐藏元素。v-if 会把dom节点删掉，把元素移除掉。
V-show通过设置dom元素的display来实现显示或隐藏的操作，并不会删除dom节点。
v-if隐藏会将组件销毁，显示时会将其内部的监听事件重建；v-show只是设置display，并不会阻止子组件内部的监听事件。
V-if有着更高的切换消耗；v-show有着更高的初始渲染消耗。
条件渲染指令 中的 双路分支
双路分支
v-if="isLogin" 当条件成立，执行if体的内容
v-else 当不条件成立，执行else的内容
特别注意：
v-else 元素必须紧跟在带 v-if 的元素的后面，否则它将不会被识别
例如：
html：
<div id="app"> <!-- 条件渲染指令 中的 双路分支 v-else 元素必须紧跟在带 v-if 的元素的后面，否则它将不会被识别 --> <p v-if="see">成年</p> <p v-else>未成年</p> </div>
vuejs：
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
see:true
}
})
</script>预览效果，如下所示：
条件渲染指令 中的 多路分支
多路分支
v-if
v-else-if
v-else-if
v-else-if
...
v-else
例如：
html：
<div id="app">
<input type="range" name="" id="" v-model="age" min="1" max="150">{{age}}
<br>
<!-- 条件渲染指令 中的 多路分支 -->
<span v-if="age<12">儿童</span>
<span v-else-if="age<18">少年</span>
<span v-else-if="age<35">青年</span>
<span v-else-if="age<60">中年</span>
<span v-else>老年</span>
</div>vuejs：
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
age:1
},
methods:{
}
})
</script>预览效果，如下所示：
列表渲染指令
v-for列表渲染指令:基于一个数组来渲染一个列表 (遍历一组内容，遍历一个集合中的内容，对数组中的内容进行逐一操作)
v-for 指令需要使用 item in items 形式的特殊语法，
其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
简述： item in items
items 是你遍历的数组
item 是数组中的每一项内容
例如：
html:
<div id="app">
<ul>
<!-- 注意: v-if="item.id<3" 获取 列表中前2条信息 -->
<li v-for="(item,index) in list" v-if="item.id<3">
索引{{index}}----- {{item.title}}-----{{item.addtime}}
</li>
</ul>
</div>vuejs:
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
list:[
{
id:1,
title:'年轻人开始反算法：不点赞、不评论、不关注、不登录',
addtime:'2021-03-19 08:50:23'
},
{
id:2,
title:'限制功能！英伟达试图阻止显卡用来挖以太坊',
addtime:'2021-03-19 08:50:23'
},
{
id:3,
title:'最具个性的Android 12、谷歌在凌晨＂搞事情＂',
addtime:'2021-03-19 08:50:23'
}
]
},
methods:{
}
})
</script>预览效果，如下所示：
