class与style绑定

可以用v-bind来绑定class和style，并且值可以使字符串，对象或者数组。并且class同样可以以列表的形式存在。同时和普通的class也可以共存。

我们先来一个字符串为值的实例：

HTML：

JS：

data:{        isShow:true,        isRed:false    }

显示的class是brand1和brand2.

这是一个对象为值的实例：

HTML：

JS：

data:{        classChoose:{
                             isShow:true,                        isRed:false                    }    }

这就是把对象当作值放在class里面。

更为强大的是我们也可以在class里面使用计算属性

HTML：

JS：

data: {  isActive: true,  error: null},computed: {  classObject: function () {
         return {      active: this.isActive && !this.error,      'text-danger': this.error && this.error.type === 'fatal',    }  } }

然后我们来看看数组作为值的实例：

HTML：

JS：

data:{        isShowClass:isShow,        isRedClass:isRed                }

当然以上的方式也可以混杂使用。

用在组件上

当你在组件上使用这些类的时候，类会被添加在根元素上，而不会覆盖其他的类。

实例：

HTML：

JS：

Vue.component('componentMy',{                    template:"
Hi
"                })

那么最终的类就是：first和second。这种应用同样适用于v-bind作用与组件时。

绑定内联样式

v-bind=style的形式十分类似，采用对象语法，属性值采用驼峰式命名法，中间用分隔符，隔开。

实例：

HTML：

JS：

data:{        whitColor:red,        whitchSize:4px        }

当然你也可以直接对属性值使用对象。像上面的代码就可以写成一下形式：

data:{        myStyle{                color:"red",                fontSize:"4px"                }}

向class一样，style也可以使用数组语法操作。

条件渲染

vuejs中可以使用v-if来行使if条件语句。

插句题外话，其实我们可以看见vuejs实现把很多的js的东西在view视图上就可以完成，这种方式确实简化了js的书写。

简单的v-if语法：

你好

如果有多条语句使用v-if，一个个书写会很麻烦，我们可以采用template的方式：

实际上template本身在加载的时候并不会出现。

而v-else语句和else本身是对应的。

如果要使用v-else就必须和if语句紧连在一起。

     
                       Now you see me            
     
            
     
                      Now you don't            
     

下面我们来看看else-if的语句块

     
                          A            
     
            
     
                          B            
     
            
     
                          C            
     
            
     
                          Not A/B/C            
     

用key元素管理可复用的元素

在现实中，比如一些登录界面，我们可以在管理员用户和普通用户之间快速切换，并且输入的内容不会改变，就是因为复用了已有的元素，而不是从头渲染。这样的好处是，vue的速度非常的快。

我们来看一个实例：

当然如果想要自己渲染就可以定义key值。

v-show

v-show用来简单的切换css的display

Hello!

需要注意的是，v-show作用的元素会一直出现在dom里面

关于v-show和v-if的区别

1.  v-show是简单的切换css的display，而v-if是真正的渲染，会进行重建和销毁，而且v-if也是惰性的。2.  v-if会增加性能开销，而v-show会增加渲染开销   。