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>效果如下：
物流状态显示判断
设置数据
写一个静态的模拟列表数据。
示例如下：
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>效果如下：
总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue响应式渲染 - 条件渲染
)
