一、绑定 HTML Class

.HTML Class 所有的主流浏览器都支持class属性
.Class属性通常用于指向样式表中的类

例如 CSS样式表中添加一个active样式类

.active {
  height: 50px;
  width: 100px;
  background: #F29
}

HTML

<div id="app-12"
  calss = "static"
  v-bind:class = "{active:isActive,'text-danger':hsError}"
  >12.绑定HTML Class</div>

JS

var app12 = new Vue({
  el: 'app-12',
  data: {
    isActive: ture,
    hasError: false
  }
})

运行结果：
首次运行时，isActive=true
html：<div id="a12" class="static active text-danger">12.绑定HTML CLass</div>
CSS样式起作用，背景色是粉色
在控制台输入：app12.isActive=false
html:<div id="app-12" class="static text-danger">12.绑定HTML CLass</div>
CSS样式不起作用，背景色无变化

二、条件渲染

1、v-if,v-else

HTML

<div id="app-17">
            <div v-if="Math.random() > 0.5">
                Now you see me
            </div>
            <div v-else>
                Now you don't
            </div>
</div>

JS

var app17 = new Vue({
    el: '#app-17'
})

2、 v-if ,v-else if,v-else

HTML

  <div id="app-18">
            <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>
        </div>

JS

var app18 = new Vue({
    el: '#app-18',
    data: {
        type: 'C'
    }
})