详解vue.js之绑定class和style的示例代码

时间：2017.09.03 发布人：nonekowns

已解决问题

谷歌nonekowns用户在2017.09.03提交了关于“蜈支洲岛详解vue.js之绑定class和style的示例代码”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2025-02-27T12:17:43。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，谢了,下次有事儿别忘了找我！

希望以下的回答，能够帮助你。

第1个回答

用户名：球官真工技际拿方classic_657 时间：2017.09.04

一.绑定向权烈双测Class属性。

绑定**用v-bind:命令，简写成:

语法：<d安九改练煤兵超法贵备ivv-bind:cla问答ss="{activ她志当了速书艺e:isActive}"></div>。class后面的双引号里接受一个对象字面量/对象引用/数组作为参数，

这里，{active:isActive}是对象参数，acti当连团持养奏亚石卷ve是class名,isActive是一个布尔值。下面是一个例子：

绑定对象字面量

html：

<divid="classBind"><span:class="{warning:isWarning,safe:isSafe}"v-on:cl虽ick="toggle">状消度洲到损态:{{alert}}{{isSafe}}</span></div>//jsvarapp11=newVue({e价施最艺l:'#classBind',data:{isWarning:true,alertList:['红色警报','警报解杆运空顶小陈令常失属货除'],alert:''},computed:{isSafe:function(){return!this.isWarning;}},methods:{toggle:fun护只ction(){this.准映解具松输住半罪洲isWarning=!thi就失留孙善构设训判s.isWarning;this.alert=this.isWarning?this.alertList白资属异液治阶飞[0]:this.aler屋员弱真与县识括tList[1];}}});

css:

.warning{color:#f2降老识先案4;}.safe{col跟升放检收顶降步金or:#42b983;}

见小什另怎跟面女毫看银当点击状态文字时，可补物袁类片讨松开路何就以切换后面的文字和颜色

//状态:警报解除true

//状态:红色警报false

绑定对象引用

这里绑定的对象可以写到Vue实例的data里面，而在class="classObj"，双引号中的class是对Vue实例中classObj对象的引用。classObj可以放在data中或者computed中，如果在computed中，则classObj所对应的函数必须返回一个对象如下：

js:

varapp11=newVue({el:'#classBind',data:{isWarning:true,alertList:['红色警报','警报解除'],alert:''},computed:{isSafe:function(){return!this.isWarning;},classObj:function(){return{warning:this.isWarning,safe:this.isSafe}}},methods:{toggle:function(){this.isWarning=!this.isWarning;this.alert=this.isWarning?this.alertList[0]:this.alertList[1];}}});

绑定数组

html:

<divv-bind:class="classArray"@click="removeClass()">去掉class</div>

data:{classArray:["big",'red']}methods:{removeClass:function(){　　this.classArray.pop();}}

css:

.big{font-size:2rem;}.red{color:red;}

效果，点击去掉class，会调用removeClass函数，去掉classArray数组的最后一项，第一次，去掉'red',字体颜色由红变黑，再点，去掉'big',字体变小。

二、绑定内联style

此时此刻，我一边看着本页旁边的那个Vueapi文档学，一边到这里卖，装逼的感觉真爽o(^▽^)o

html

<divid="styleBind"><span:style="{color:theColor,fontSize:theSize+'px'}"@click="bigger">styleBind</span></div>

css

这个不需要css。。。

varapp12=newVue({el:'#styleBind',data:{theColor:'red',theSize:14},methods:{bigger:function(){this.theSize+=2;}}});

除了传入对象字面量以外，也可以传入对象引用和数组给V-bind:style

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。