Vue 响应式渲染 - 条件渲染

ops/2025/2/13 19:13:23/

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue响应式渲染 - 条件渲染

条件渲染

v-if

v-if-else

模版template

物流状态显示判断

设置数据

不同状态渲染

总结

条件渲染

v-if

使用Vue条件判断显示和隐藏。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../lib/vue.js"></script>
</head>
<body><div id="box"><div v-if="isShow">显示</div><div v-if="!isShow">隐藏</div></div><script>let vm = new Vue({el:'#box',data: {isShow : true}})</script>
</body>
</html>

v-if-else

在原来的例子上使用else判断来执行原有否的情况。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../lib/vue.js"></script>
</head>
<body><div id="box"><div v-if="isShow">显示</div><div v-else>隐藏</div></div><script>let vm = new Vue({el:'#box',data: {isShow : true}})</script>
</body>
</html>

模版template

template就是一个包装元素，不会真正创建在页面上。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../lib/vue.js"></script>
</head>
<body><div id="box"><template v-if="isShow"><div>11111</div><div>22222</div><div>33333</div></template></div><script>let vm = new Vue({el:'#box',data: {isShow:true}})</script>
</body>
</html>

效果如下：

物流状态显示判断

设置数据

写一个静态的模拟列表数据。

示例如下：

javascript">let vm = new Vue({el:'#box',data: {isShow : true,datalist: [{title:'电脑',state:0,},{title:'笔记本',state:1,},{title:'手机',state:2,},{title:'硬盘',state:3,}]}})

不同状态渲染

对物流不同状态进行判断显示。

示例如下：

<div id="box"><ul><li v-for="item in datalist">{{item.title}}---<span v-if="item.state === 0">未付款</span><span v-else-if="item.state === 1">待发货</span><span v-else-if="item.state === 2">已发货</span><span v-else>已完成</span></li></ul>
</div>

效果如下：