增加方法：1、用“:class=”[‘类名’]”语句添加；2、用“:class=”[‘类名1′,’类名2’,{属性名(类名):’属性值(true或false)}]””语句；3、用“:class=”{属性名(类名):true}”语句；4、用“:style=”{‘样式名’:’样式值’}””语句；5、用“:style=”样式””语句增加；6、用“:style=”[data]””语句。
本教程操作环境：windows7系统、vue3版，DELL G3电脑。
vue中的添加样式
一、使用class样式：
类名必须用引号 引起来；
1、数组
这种方法 需要用 v-bind: => : 绑定
登录后复制
2、数组中使用三元表达式
立即学习“前端免费学习笔记（深入）”；
这种方法 需要用 v-bind: => : 绑定
登录后复制
3、数组中嵌套对象
这种方法 需要用 v-bind: => : 绑定
登录后复制
4、直接适用对象
这种方法 需要用 v-bind: => : 绑定
登录后复制
二、使用内联样式；
1、直接在元素上通过 :style 的形式
这种方法 需要用 v-bind: => : 绑定
登录后复制
2、将样式对象，定义到data 中，在引用到 :style 中
这种方法 需要用 v-bind: => : 绑定
登录后复制
3、在 :style 中通过数组，引用多个 data 上的样式对象；
这种方法 需要用 v-bind: => : 绑定
登录后复制
代码实例：
Vue样式的运用 * { margin: 0; padding: 0; } .box { width: 150px; height: 150px; background: skyblue; line-height: 150px; text-align: center; } .border { border-radius: 50%; } .color { color: #fff; font-size: 24px; }<!--let vm = new Vue({ el: '#app', data: { tagger : true, vstyle : ['border','box'], vObj : {"border":true,"color":true,"box":true} }, methods: { } })添加style样式--> <!--添加style样式-->添加style样式
登录后复制
（学习视频分享：vuejs入门教程、vue中的添加样式
一、使用class样式：
类名必须用引号 引起来；
1、数组
以上就是vue怎么在元素上增加样式的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2921976.html
