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

vue的分支结构：
v-if，v-else，v-else-if，v-show
可以通过一个简单的成绩案例来演示
样式部分：

      
优秀
      
良好
      
一般
      
比较差
      
测试v-show
      点击切换显示
    

逻辑部分：

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
样式部分：

水果列表
      

        
{{item}}
        
{{item + '---' +index}}
        

        {{item.ename}}
        -----
        {{item.cname}}
        
      

逻辑部分：

 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可以循环遍历对象
样式部分：

      
{{value + '---' + key + '----' + index}}
      
    

逻辑部分：

/*原生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'
          }
       }
      });