2018-09-13

首先复习一下

v-for="" 循环
v-model='' 双向数据绑定 用于表单元素
v-on:事件名='函数名' 绑定一个事件的 简写@click=""

今天所学

1.v-bind
v-bind:属性名='' 绑定一个属性 简写 ：属性名='值'

效果如下图所示
点击图片会更换图片 再次点击更换回来

QQ截图20180914175007.png

QQ截图20180914175015.png

    
    
    
    



        
    

        
{{index+1}}
    

类似于轮播图 点击li更换图片 图中使用的v-bind是简写
输出效果如下图所示 点击1时是一张图片 2时是另一张 3和4同理

QQ截图20180914175442.png

QQ截图20180914175451.png

QQ截图20180914175505.png

2.v-show

控制元素的显示或隐藏 display:none
&& 与
|| 或
// 有假与为假，有真或为真
！ 非 取反

    
    
    



    
{{msg}}
    
{{msg}}

效果如下图所示

h1不显示 p显示

QQ截图20180914175819.png

点击按钮隐藏图片再次点击 显示图片

    
    
    



    点击
    

效果如下图所示

QQ截图20180914185422.png

QQ截图20180914185436.png

v-if="" 控制元素的显示或隐藏 visibility:hidden;
与v-show不同之处

、实现方式

v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点

v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。

2、编译过程

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； 

v-show只是简单的基于css切换；

3、编译条件

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译；

v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留； 

4、性能消耗

v-if有更高的切换消耗，不适合做频繁的切换；

v-show有更高的初始渲染消耗，适合做频繁的额切换；

随机数生成

num:Math.floor(Math.random()*(max-min+1)+min)