web前端框架vue条件判断v-if和循环v-for

vue的分支结构：
v-if，v-else，v-else-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='flag'>测试v-show</div>
      <button v-on:click='handle'>点击切换显示</button>
    </div>

逻辑部分：

var vm = new Vue({
        el: '#app',
        data: {
          score: 70,
          flag: false
        },
        methods: {
         handle:function(){
          this.flag = !this.flag;
         }
        }
      });

代码分析：当分数在不同的分段时，显示的结果也不一样，v-if控制元素是否渲染到页面，v-show控制元素是否显示(元素已经渲染到页面)，函数handle控制按钮切换v-show显示和隐藏

循环结构v-for
样式部分：

<div>水果列表</div>
      <ul>
        <li v-for='item in fruits'>{{item}}</li>
        <li v-for='(item, index) in fruits'>{{item + '---' +index}}</li>
        <li :key='item.id' v-for='(item, index) in myFruits'>
        <span>{{item.ename}}</span>
        <span>-----</span>
        <span>{{item.cname}}</span>
        </li>
      </ul>

逻辑部分：

 var vm = new Vue({
        el: '#app',
        data: {
          fruits: ['apple','orange','banana'],
          myFruits: [{
            id:1,
            ename: 'apple',
            cname: '苹果'},
            {
            id:2,
            ename: 'orange',
            cname: '橙子'},
            {
            id:3,
            ename: 'banana',
            cname: '香蕉'}]
        },
        methods: {
          
        }
      });

代码分析：有一个简单的数组fruits和有一个对象数组myFruits,循环fruits直接使用v-for='item in fruits'，然后使用插值表达式{{item}}显示出循环渲染的结果。
使用v-for='(item, index) in fruits'，可以显示出数组的索引号。
循环对象数组的时候，插值表达式需要使用{{item.ename}}和{{item.cname}}，分别把英文名和中文名都渲染出来。
使用:key和唯一标识id可以提供vue的性能，但是对项目本身没有任何影响。

v-for可以循环遍历对象
样式部分：

<div id="app">
      <div v-for='(value, key, index) in obj'>{{value + '---' + key + '----' + index}}</div>
      <!-- value属性的值，key属性的名字，index属性的索引号 -->
    </div>

逻辑部分：

/*原生JS的循环对象的方法*/
     var obj = {
      uname: 'lisi',
      age: 12,
      gender: 'male'
     }
     for(var key in obj){
      console.log(key, obj[key])
     }
     /*v-for循环遍历对象的方法*/
      var vm = new Vue({
       el:'#app',
       data: {
          obj: {
          uname: 'lisi',
          age: 12,
          gender: 'male'
          }
       }
      });