使用vue做项目的时候，遇到class绑定，其中有一个地方，两个类名之间不允许用空格隔开，否则就会失去相应的渲染效果。
<div id="app" class="box">
<ul class="tabs clearfix">
<li v-for="(tab,index) in tabsName">
<a href="#" class="tab-link" @click="tabSwitch(index)" v-bind:class="{active:tab.isActive}">{{tab.name}}</a>
</li>
</ul>
<div class="cards">
<div class="tab-card" style="display: block">这是HTML教程ngfdgh</div>
<div class="tab-card">欢迎来到CSS模块</div>
<div class="tab-card">嗨，这里是vue</div>
<div class="tab-card">欢迎来到CSS模块</div>
<div class="tab-card">嗨，这里是vue</div>
<div class="tab-card">欢迎来到CSS模块</div>
</div>
</div>
登录后复制
.box {
width: 100%
height: 100%
/*margin: 0 auto
border: 1px solid #000*/
}
.tabs {
float: left
width: 12.555555555555555vw
list-style: none
}
.tabs li {
width: 10.555555555555555vw
min-width: 10vmin
margin: 0.111111111111111vw 1.1111111111111111vw
float: left
list-style: none
}
.tabs .tab-link {
border-radius: 5px
display: block
text-align: center
line-height: 35px
background-color: #5597B4
color: #fff
text-decoration: none
}
.tabs .tab-link.active {
line-height: 45px
border-bottom: 5px solid #E35885
transition: .3s
}
.cards {
padding: 1.111111111111111vw
/*border: 2px #00ACEE solid*/
float: left
}
.cards .tab-card {
display: none
}
.clearfix:after {
content: ""
display: block
height: 0
clear: both
}
登录后复制
上图所示的代码中，使用v-bind，绑定了active这样的类，注意css文件里面，.tab-link.active中间是没有空格的，如果添加了空格，将不会呈现.active的样式
.tabs .tab-link.active {
line-height: 45px
border-bottom: 5px solid #E35885
transition: .3s
}
登录后复制总结：
.tabs .tab-link .active 是后代选择器。
.tabs .tab-link.active 则是在一个元素上，这个元素包括这两个类才会有效果。
如果使用了第三方的系统主题[如：WB（WindowsBlinds）和部分VS（VisualStyle）]又安装了IE8，网页中的输入框就会变小。如果换个主题，那么按钮会变小，看不清楚。按钮、输入框、文本框、控件就全部都缩小了。INPUT：
TEXTAREA：
IE8可以直接在Internet选项里面直接改（Internet选项-高级 不选 对网页上的按钮启用视觉样式）WB的也可以把浏览器添加到排除列表，然而按钮和界面都不能用第三方主题的效果而变丑。而VS就可以用SB（StyleBuilder的简称）来修改主题的设置。CSS解决方法：（一劳永逸，只要设置一下，无论你用WB、VS什么主题，所有IE内核的浏览器，都不用再做修改。）
在记事本中输入如下代码，保存为input.css
代码: INPUT{
font-size: 10pt
}
TEXTAREA{
font-size: 10pt
}
BUTTON{
font-size: 10pt
} 保存时，将.txt扩展名改为.css
Internet选项－常规－辅助功能下面“用户样式表”中载入这个样式文件即可参考 http://hi.baidu.com/lfhzh/blog/item/cbb46f805885cad1bc3e1ec1.html
