class与style绑定
可以用v-bind来绑定class和style，并且值可以使字符串，对象或者数组。并且class同样可以以列表的形式存在。同时和普通的class也可以共存。
我们先来一个字符串为值的实例：
HTML：
<p class="brand1" v-bind:class="brand2:isShow , brand3:isRed"></p>JS：
data:{
isShow:true,
isRed:false
}显示的class是brand1和brand2.
这是一个对象为值的实例：
HTML：
<p class="brand1" v-bind:class="classChoose"></p>JS：
data:{
classChoose:{
isShow:true,
isRed:false
}
}这就是把对象当作值放在class里面。
更为强大的是我们也可以在class里面使用计算属性
HTML：
<div v-bind:class="classObject"></div>JS：
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal',
}
}
}然后我们来看看数组作为值的实例：
HTML：
<p class="brand1" v-bind:class="[isShowClass,isRedClass]"></p>JS：
data:{
isShowClass:isShow,
isRedClass:isRed
}当然以上的方式也可以混杂使用。
用在组件上
当你在组件上使用这些类的时候，类会被添加在根元素上，而不会覆盖其他的类。
实例：
HTML：
<componentMy class="second"></componentMy>JS：
Vue.component('componentMy',{
template:"<p class="first">Hi</p>"
})那么最终的类就是：first和second。
这种应用同样适用于v-bind作用与组件时。
绑定内联样式
v-bind=style的形式十分类似，采用对象语法，属性值采用驼峰式命名法，中间用分隔符，隔开。
实例：
HTML：
<p v-bind:style="{color:whitchColor,fontSize:whitchSize}"></p>JS：
data:{
whitColor:red,
whitchSize:4px
}当然你也可以直接对属性值使用对象。像上面的代码就可以写成一下形式：
<p v-bind:style="myStyle"></p>
data:{
myStyle{
color:"red",
fontSize:"4px"
}
}向class一样，style也可以使用数组语法操作。
条件渲染
vuejs中可以使用v-if来行使if条件语句。
插句题外话，其实我们可以看见vuejs实现把很多的js的东西在view视图上就可以完成，这种方式确实简化了js的书写。
简单的v-if语法：
<p v-if="false">你好</p>如果有多条语句使用v-if，一个个书写会很麻烦，我们可以采用template的方式：
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>实际上template本身在加载的时候并不会出现。
而v-else语句和else本身是对应的。
如果要使用v-else就必须和if语句紧连在一起。
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>下面我们来看看else-if的语句块
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>用key元素管理可复用的元素
在现实中，比如一些登录界面，我们可以在管理员用户和普通用户之间快速切换，并且输入的内容不会改变，就是因为复用了已有的元素，而不是从头渲染。这样的好处是，vue的速度非常的快。
我们来看一个实例：
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>当然如果想要自己渲染就可以定义key值。
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>v-show
v-show用来简单的切换css的display
<h1 v-show="ok">Hello!</h1>需要注意的是，v-show作用的元素会一直出现在dom里面
关于v-show和v-if的区别
1. v-show是简单的切换css的display，而v-if是真正的渲染，会进行重建和销毁，而且v-if也是惰性的。
2. v-if会增加性能开销，而v-show会增加渲染开销 。