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>

预览效果，如下所示：