vue添加class样式实例讲解
更新时间：2019年02月12日 11:41:35 投稿：laozhang
在本文里我们给大家整理了关于vue添加class样式实例，对此有兴趣的朋友们可以学习参考下。
vue提供了一个动态添加class的v-bind:class（:class） 对象，可以使用：class进行clas动态的切换。案例中将通过使用:class设置 字体为红色。
1、新建一个html代码页面。
2、在html代码页面创建一个<div>同时添加id为app，并添加一段文本
3、引入vue.js文件。使用<scrtip>标签引入vue文件。
4、创建vue实例。新建一个<script>标签，然后使用new Vue()创建实例。
代码：
<script>
var app = new Vue({
el:"#app"
})
</script>
5、创建设置字体为红色的red样式。在<title>标签后面创建一个<style>标签，然后设置字体为红色的red样式。
代码：
<style>
.red{
color: red;
}
</style>
6、使用:class添加red类样式。在<div>标签里面添加 :class="{red:true}"。
7、保存html代码后使用浏览器打开，即可看到字体已经变为了红色
相关文章
这篇文章主要介绍了vue3中安装使用vue-i18n实时切换语言不用刷新问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
不过 Vue 本身含有非常丰富的功能，要用 Vue 搭建完整的应用，仍然需要了解大量 Vue 设计概念和操作技巧。这篇文章主要介绍了Vue.js 十五分钟入门图文教程,需要的朋友可以参考下2018-09-09
vue使用$store.commit() undefined报错的解决
这篇文章主要介绍了vue使用$store.commit() undefined报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了Vue3使用el-table组件实现分页、多选以及回显功能,文中通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-09-09
这篇文章主要为大家详细介绍了Vue Router初始化路由信息的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解一下2023-11-11
本篇文章主要介绍了在vue-cli中组件通信的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了vue-router路由懒加载和权限控制的相关资料2017-12-12
vue-router2.0 组件之间传参及获取动态参数的方法
下面小编就为大家带来一篇vue-router2.0 组件之间传参及获取动态参数的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了vue上传文件formData上传的解决全流程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
Vuex中this.$store.commit()和this.$store.dispatch()区别说明
这篇文章主要介绍了Vuex中this.$store.commit()和this.$store.dispatch()区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论