③. 分支结构(if-else-v-show)
- ①. 分支概述:
②. 代码展示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- v-show的原理:控制元素样式是否显示display:none v-if控制元素是否渲染到页面(变化的比较少) v-show控制元素是否显示(已经渲染到了页面)[变化的比较大] --> <div id="app"> <div v-if='score>90'>优秀</div> <div v-else-if='score<90&&score>80'>良好</div> <div v-else-if='score<=80&&score>70'>及格</div> <div v-else>差</div> <div>下面这个是v-show</div> <div v-show='flag'>显示</div> </div> <script src="../js/vue.js"></script> <script> var vm=new Vue({ el:'#app', data:{ score:'50', flag:true } }); </script> </body> </html>
<el-table-column :prop="c.field" :label="c.title" :width="c.width" v-for="(c,i) in columns" :key="i"> <template slot-scope="scope" > <span v-if="c.field=='ISPAY'"> {{ scope.row.ISPAY=='0'?'未支付':'未支付' }} </span> <span v-else-if="c.field=='TASKSTATUS'"> {{scope.row.TASKSTATUS == '0' ?"未审批" : scope.row.TASKSTATUS=='1' ? "已通过" : '已驳回'}}</span> <span v-else-if="c.field=='APPLYTIME'"> {{scope.row.APPLYTIME? formatDate(scope.row.APPLYTIME):"" }} </span> <span v-else> {{scope.row[scope.column.property]}}</span> </template> </el-table-column>
④. v-for循环结构
- ①. 循环遍历数组
<li v-for='item in list'>{{item}}</li> <li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li> <li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li> 注意:key的作用:帮助Vue区分不同的元素,从而提高性能
②. 循环遍历对象
<div v-for='(value, key, index) in object'></div> <div v-if='value==12' v-for='(value, key, index) in object'></div>
③. v-for代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div>数组(不带index的)</div> <ul> <li v-for='item in fruits'>{{item}}</li> </ul> <div>数组(带index的)</div> <ul> <li v-for='(item,index) in fruits'>{{item}}----{{index}}</li> </ul> <div>数组(复杂数据类型[不带index的])</div> <ul> <li v-for='item in myFruit'>{{item.ename+'----'+item.cname}} </li> </ul> <div>数组(复杂数据类型[带index的])</div> <ul> <li v-for='(item,index) in myFruit'>{{item.ename}} ---- {{item.cname}} --- {{index}} </li> </ul> <div>key的作用:帮助Vue区分不同的元素,从而提高性能</div> <ul> <li :key='item.id' v-for='(item,index) in myFruit'>{{item.ename}} ---- {{item.cname}} --- {{index}} </li> </ul> <div>对象</div> <div v-for='(value,key,index) in product'>{{key+'-----'+value+'-----'+index}}</div> </div> <script src="../js/vue.js"></script> <script> var vm=new Vue({ el:'#app', data:{ fruits:['apple','orange','banana'], myFruit:[ {id:1,ename:'apple',cname:'苹果'}, {id:2,ename:'banana',cname:'香蕉'} ], product:{pname:"电视机",price:6000} } }); </script> </body> </html>
