Vue的数据渲染

一插值表达式

1插值表达式就是vue实现数据渲染到页面的方式，不需要进行Dom *** 作直接将数据展示在页面

2插值表达式就是 {{}} 里面可以执行代码

但是我们要注意使用插值表达式渲染数据的时候会出现插值闪烁的现象

    
    
    



    
        {{name}}
    

这里我们通过定时器可以看到当网络延迟加载的时候，我们可以在页面中看到插值表达式的语法，只有网络加载好之后数据才会渲染

二，通过v-text和v-html 渲染数据

在JavaScript中，数据渲染通过：innerText innerHTML

在jQuery中，数据渲染通过：text() html()

在vue中，数据渲染通过：v-text v-html

1 v-text

在这里我们的a标签就和原生js的效果一样ljie里面的超链接不能使用也就是v-text只能识别内容不能识别标签

2 v-html

代码运行后我们可以发现v-html里面的超链接是可以跳转的

二，条件渲染 v-if&v-show

v-if根据条件进行渲染

    
    
    



    天气真好
    下雨了
    雷暴雨

这里面的v-if  v-else-if   v-else  和原生的if(){ }else if(){ }else{ }效果是一样的

v-show根据条件判断是否显示

    
    
    



    风和日丽

3,二者的区别

v-if和v-show区别： 1、v-if - 如果条件成立，那么创建该标签，如果条件不成立，那么销毁该标签【创建销毁】 - 创建和销毁，是直接 *** 作DOM进行的 - 运行时，不经常切换或者条件不经常更改，则使用v-if

2、v-show - 如果条件成立，那么显示该标签，如果条件不成立，那么隐藏该标签【显示隐藏】 - 显示和隐藏，是通过css属性设置 - 运行时，频繁切换，则使用v-show

注意：v-if只有当条件成立，才会创建标签，v-show不管条件成立不成立，第一次都会创建该标签

三·v-for循环展示数据

1循环普通数组

    
    
    



    下标：{{index}}数据：{{item}}

2遍历对象数组

    
    
    



    

        

        

            
序号
            
姓名
            
年龄
            
性别
            
 *** 作
        
        
        

        

            
{{index+1}}
            
{{item.username}}
            
{{item.age}}
            
{{item.sex}}
            
编辑
                删除
        
        
    


 

扩展   根据后端返回数据的状态码进行遍历

    
    
    



    
        {{item}}
    

这里是只有状态码为101时候才会遍历数据

四数据绑定 v-on

    
    
    




    Vue事件绑定
    双击
    双击事件
    双击获取数据
    双击获取数据
    设置数据
    简写