vue学习-第七天

一、绑定 HTML Class

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

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

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

HTML

12.绑定HTML Class

JS

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

运行结果：
首次运行时，isActive=true
html：

12.绑定HTML CLass

CSS样式起作用，背景色是粉色
在控制台输入：app12.isActive=false
html:

12.绑定HTML CLass

CSS样式不起作用，背景色无变化

二、条件渲染

1、v-if,v-else

HTML

            

                Now you see me
            
            

                Now you don't
            

JS

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

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

HTML

  

            

                A
            
            

                B
            
            

                C
            
            

                Not A/B/C
            
        

JS

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