整个网页不仅有标签还有css进行渲染,所以,现在讲讲在vue里面加入你想加的css。
在不用vue的时候,有一种内联方式加入css(大概是<div style="..."></div>),现在用Vue的话,例子如下
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
页面展示为
但是这样写会觉得dom杂乱,不是很整齐,所以可以将样式绑定到对象上更好,写法具体是:
<div class="hello" v-bind:style="styleObject">{{ message }}</div>
前端展示和第一种写法一样。
这里要说明的是:1、在 style前面多了“v-bind:”,这也是vue绑定指令的方法,前面加了v用来标识,后面的bind是方法名称;2、如果dom里面有相同类名,但是js里面只有一个vue,则只对第一个类名生效;