基本指令02

v-show

v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏，根据表达式的真假，切换元素的display css属性


    
        {{ message }}

v-show.png

v-if

v-if控制元素的显示隐藏方式是直接删除和添加DOM元素


    
        {{ message }}

表达式的值为假时，页面并不添加此DOM元素

v-if.png

结合v-else和v-else-if使用

中年

青年

小孩

要相信光

v-if和v-show的区别

一、功能区别

同样的实现控制元素的显示和隐藏，v-show严格意义上是“条件隐藏”，把HTML元素先渲染起来，符合条件就显示，不符合条件display就为none，不显示，但是元素还在那。而v-if是真正意义上的“条件渲染”，浏览器先判断符不符合条件，符合了再渲染，否则不渲染DOM，浏览器中找不到这个DOM

二、vue生命周期区别

v-if由于是重新渲染，所以每次切换一次会重新走一次生命周期，v-show由于只是控制显示隐藏，所以除了初始化渲染，其他时候都不会再走相关生命周期了

三、性能区别

1、v-if有更高的切换开销，v-show有更高的初始渲染开销。如果需要频繁的切换，使用v-show比较好，如果运行条件很少改变，使用v-if比较好

2、v-show比v-if性能更高，因为v-show只能动态的改变样式，不需要增删DOM元素。所以当程序不是很大时候，v-if和v-show区别都不大，如果项目很大，推荐多用v-show，较少浏览器后期操作的性能。

v-for

遍历普通数组

v-for中可以使用in 和 of来遍历，在v-for中，这两个没什么区别，都可以使用

在es5/6中，for in 遍历对象，for of 遍历数组


    
        索引值：{{index}}------每一项{{item}}
        
        索引值：{{index}}------每一项{{item}}

v-for1.png

遍历对象

v-for="(值,键,索引) in 原对象"


    
      键：{{key}}------值：{{val}}------索引{{i}}

v-for2.png

遍历对象数组


    
        id：{{val.id}}------name：{{val.name}}------age: {{val.age}}-----索引： {{i}}

v-for3.png

遍历数字和字符串


    
        数字: {{n}}
        
        字符串：{{s}}

v-for4.png

嵌套循环


    
        
            {{item.name}}
            
                {{item.cname}}

v-for5.png

v-bind

v-bind 用于绑定数据和元素属性

语法：

简写：

动态绑定HTML Class




    普通class

    使用数组

    数组中使用对象代替三元表达式

    数组中使用三元表达式

    使用对象

    使用对象

动态绑定HTML style


    绑定Style

    数组


    绑定Style

v-on

v-on 用于绑定事件

语法：

简写：

不传参时，可以直接写函数名

使用{{}}时，必须写圆括号


    点击次数： {{num}}

    

    

    

    {{msg}}


    

    {{testString()}}

v-on传参

v-on绑定多个事件

按键修饰符


    
    键盘事件@keydown
    
    .enter