3 条件与循环

作者: 十佳少年 | 来源:发表于2019-04-18 08:23 被阅读0次

3、条件与循环
3、条件与循环
3 条件与循环
3、条件与循环
3 条件与循环
2018-05-15 第九天
3.2循环结构
控制流程（if、三目、while、for）（2018-11-20
11、MySQL存储过程条件语句
条件与循环

条件渲染指令： v-if、v-else-if、v-else：可以根据表达式的值在DOM中渲染或销毁元素/组件,与v-show不同的是，v-if是真正的条件渲染，适合条件不经常变更的场景；而v-show只是简单的CSS属性切换，使用于频繁切换条件。

v-if举例：

当status为1时显示该行当status为2时显示该行否则显示该行varapp =newVue({ el :'#app', data:{ status:1}})

v-show举例：

当status为1时显示该行varapp =newVue({ el :'#app', data:{ status:2}})

列表渲染指令：v-for：当需要将一个数组遍历或枚举一个对象循环显示时，会用到列表渲染指令v-for，结合in来使用

举例：

{{book.name}}varapp =newVue({ el :'#app', data:{ books:[ { name :'Vue.js'}, { name :'JavaScript'}, { name :'HTML5+CSS3'}, ] }})

条件与循环结合的一个综合例子：

<!DOCTYPE html>Vue.js条件与循环#app{width:80%;margin:0auto; }.container{display: flex; }.card{width:200px;height:200px;border:1pxsolid#eee;border-radius:10px;margin-right:30px;text-align: center; }.cardimg{width:100%;height:100%;border-bottom-left-radius:10px;border-bottom-right-radius:10px; }.like{color: green; }.no-like{color: red; }显示书籍信息

喜欢不喜欢varapp =newVue({ el:'#app', data: { show:true, books: [{ name:'时间的礼物', cover:'https://img1.doubanio.com/view/subject/m/public/s29951659.jpg', like:true}, { name:'显微镜下的大明', cover:'https://img3.doubanio.com/view/subject/m/public/s29960161.jpg', like:false}, { name:'夏摩山谷', cover:'https://img3.doubanio.com/view/subject/m/public/s29967206.jpg', like:true}, { name:'642件可写的事', cover:'https://img3.doubanio.com/view/subject/m/public/s29953545.jpg', like:false} ] } })