欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
凡科轻站小程序官网_vuejs绑定class和style样式
时间: 2021-01-12 12:15 浏览次数:
vuejs关联class和style款式 文中关键详细介绍了vue.js完成关联class和style款式的方式。具备非常好的参照使用价值。下边跟随网编一起來看看吧关联Html Class大家能够发送给 v-bind:class 一
vuejs绑定class和style样式       本文主要介绍了vue.js实现绑定class和style样式的方法。具有很好的参考价值。下面跟着小编一起来看下吧

绑定Html Class

我们可以传给 v-bind:class 一个对象,以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存:

 div v-bind:class="{ 'class-a': isA, 'class-b': isB }" /div 
data: { isA: true, isB: false}

渲染结果:

div /div

你也可以直接绑定数据里的一个对象,结果与上面的一致:

 div v-bind: /div 
data: {
classObject: {
 'class-a': true,
 'class-b': false
}

绑定内联样式

v-bind:style的对象语法十分直观——看着非常像 CSS,其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case):

 div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" /div 
data: {
activeColor: 'red',
fontSize: 30
}

直接绑定到对象上(让模板更清晰)

 div v-bind: /div 
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}

备注:当 v-bind:style使用需要厂商前缀的 CSS 属性时如 transform,Vue.js 会自动侦测并添加相应的前缀。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!


下一篇:没有了


Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园