如何在Vue中有条件地使用CSS类

html-css014

如何在Vue中有条件地使用CSS类,第1张

<a  v-bind:class="index==0?'current1':'current2'" >test</a>

上面代码 index请在data里面定义

你是用链接调用的CSS文件是吧？你要把</style>都删除掉啊，独立的CSS文件中不需要这部分内容的。另外你给wan设的CSS样式中float后面的“:”写成“”了。

#wan{ width:300pxheight:200pxbackground-color:0ccc00float:left}

#chen{ width:600px height:200px background-color:#0cffff float:left}

你所列举的代码不是加在css里的,是加在html里的

css里没法写条件判断的,但是根据各个浏览器支持的调试命令不同,可以用来区分,比如ie系列支持*号.你写个样式

.style1 { padding:1px*padding:10px}

这样就相当于所有ie浏览器下padding都是10px非ie就是1px

因为其他浏览器不识别*,所以*padding:10px就失效了,而ie下识别,所以则覆盖掉之前的1px了.

不同浏览器都有自己专用的hack,这样就可以实现判断了

区分IE6，IE7，firefox background:orange*background:green_background:blue