Vue基础语法：条件判断、循环遍历、内容绑定

vue中包含有大量的指令，指令具有固定的功能或作用

指令即属性，v-开头

1. 条件判断

1）v-show

2）v-if, v-else 指令所在的标签必须连贯写，否则语法错误

3）v-if, v-else-if, v-else

注：

值为true时，指令所在的标签在页面中显示

值为false时，v-if指令所在的标签，在DOM树上不存在的

v-show指令所在的标签，在DOM树上存在，但是在页面中不显示的，是display:none的效果

用法：

    
这是一个段落标签，包含有大量的文字

JS的条件判断控制流程语句：

        // if( 条件判断 ) { 为真时的执行语句 } else { 为假时的执行语句 }
        // 条件判断： >, <, ==, ===, >=, <=, !=, !==
        // == 值相等   1 == '1' 为true, true == 1, 为true
        // 隐式类型转换
        // === 值和数据类型都相等
        if (isMale) {
            console.log('性别是男');
        } else {
            console.log('性别是女');
        }
        console.log(true == 1) // true
        console.log(false == 0); // true
        console.log(10 + true); // 11

        // undefined, null, 0, '' 在条件判断时，为false
        // 空格也是个字符串

2. 循环遍历

循环遍历指令  v-for

            1）. 数组元素(名称自定义) in 数组变量名称(来自于data)

            2）. (数组元素，索引值) in 数组名称

            3）. value in 对象object

            4）. (value, key) in 对象object

            5）. (value, key, index) in 对象object

用法：

    

        // （1）
        

            

                {{ num }}
            
        
        // （2）
        

            

                
 序号 
                
 名称 
                
 年龄 
            
            

                
 {{index + 1}} 
                
 {{ student.name }} 
                
 {{ student.age }} 
            
        
        // （3）
        

            {{ item }}
        
        // （4、5）
        

             {{ key }} 
            :
             {{ value }} 
            -- {{ index }}
        

    

3. 内容绑定

1）v-html

2）v-text