vue中的模板语法、条件渲染（v-if）、列表渲染（v-for）

目录

一、模板语法

data为什么是一个函数不是一个对象?

二、条件渲染（v-if、v-show）

v-if和v-show的区别？

三、列表渲染（v-for）

v-for中key的作用？

四、style绑定 

五、class绑定（动态类名）

---

一、模板语法

    1.文本插值 把vue变量渲染为普通文本使用mustache语法

        {{msg}}

    2.v-html  输出html代码 返回数据是字符串html代码 输出html代码 可以给绑定v-html 

    3.v-bind 给标签属性绑定一个变量 动态绑定style class 其他数据类型 可以使用v-bind: 可以简写为:

        
我是一个div
        
我是一个div

    4.js表达式 
      调用方法 三目运算符 
      {{js表达式}}

        {{str.split(' ').reverse().join(' ')}}
        {{Boolean(msg)}}
        {{3>2?'YES':'NO'}}

    5.v-once 执行一次性插值 后续数据发生变化 插值处数据不发生改变

    

        
        
{{msg}}
    
    

data为什么是一个函数不是一个对象?

    因为组件是可复用得实例，如果组件data是一个对象，会暴露在全局，数据全局可见，任意一个组件修改该组件数据，其他使用到该组件得组件数据也会被修改，所以data是一个函数不是一个对象，数据仅组件内可见。

二、条件渲染（v-if、v-show）

    
    
    
    


    

        
        

            

                电话：
                
            
        
        

            

                邮箱：
                
            
        
        
错误
        切换
        
        
显示内容
    
    

浏览器运行结果如下：

 

v-if和v-show的区别？

    1.v-if满足条件对应的组件创建，不满足条件对应的组件销毁
    2.v-if是惰性的，如果初始条件不满足，dom元素就不会被渲染
    3.v-show无论初始条件满不满足，都会渲染到模板中，对应的是css属性显示与隐藏，满足显示元素，不满足条件隐藏元素
    4.v-if有着更高dom切换开销，条件很少改变使用v-if，频繁切换使用v-show

三、列表渲染（v-for）

v-for：
  (item,index) in/of items 列表渲染数组
  (value,key,index) in obj 列表渲染对象
  给列表创建元素增加一个key值作为唯一标识

    
    
    
    


    

        
        
        

            {{item.name}}--{{item.age}}--{{index}}
        

        
        

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

代码运行结果如下：

v-for中key的作用？

  vue采用得是diff算法，会高效复用组件，当组件相似的时候，一般往往是复用而不是重新创建，
  如果不希望被复用，就可以给组件设置一个唯一标识key，告诉vue是不希望被复用得节点

四、style绑定 

  内联样式绑定 

    

        
我是一个div
        
我是一个div
        
我是一个div
    
    

五、class绑定（动态类名）

  :class='type==="xxx"?"current":""'
  :class='{active:isActive}'
  :class='{active:isActive,error:hasError}'
  :class='[{active:isActive,error:hasError},{class:true}]'

    
    
    
    
    


    

        
我是一个div
        
我是一个div
        
我是一个div
        
我是一个div