vue添加class样式实例讲解


Posted in Javascript onFebruary 12, 2019

vue提供了一个动态添加class的v-bind:class(:class) 对象,可以使用:class进行clas动态的切换。案例中将通过使用:class设置 字体为红色。

vue添加class样式实例讲解

1、新建一个html代码页面。

vue添加class样式实例讲解

2、在html代码页面创建一个<div>同时添加id为app,并添加一段文本

vue添加class样式实例讲解

3、引入vue.js文件。使用<scrtip>标签引入vue文件。

vue添加class样式实例讲解

4、创建vue实例。新建一个<script>标签,然后使用new Vue()创建实例。

代码:

<script>

var app = new Vue({

el:"#app"

})

</script>

vue添加class样式实例讲解 

5、创建设置字体为红色的red样式。在<title>标签后面创建一个<style>标签,然后设置字体为红色的red样式。

代码:

<style>

.red{

color: red;

}

</style>

vue添加class样式实例讲解

6、使用:class添加red类样式。在<div>标签里面添加 :class="{red:true}"。

vue添加class样式实例讲解

7、保存html代码后使用浏览器打开,即可看到字体已经变为了红色

vue添加class样式实例讲解

Javascript 相关文章推荐
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
js实现简单计算器
Nov 22 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
Vue中使用canvas方法总结
Feb 12 #Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 #Javascript
js实现json数组分组合并操作示例
Feb 12 #Javascript
vue文件运行的方法教学
Feb 12 #Javascript
vue的for循环使用方法
Feb 12 #Javascript
JavaScript常用工具方法封装
Feb 12 #Javascript
vue组件开发props验证的实现
Feb 12 #Javascript
You might like
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
Python中str.format()详解
2017/03/12 Python
Python正则表达式经典入门教程
2017/05/22 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
Python爬取梨视频的示例
2021/01/29 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
初中生学习的自我评价
2013/11/14 职场文书
学生操行评语大全
2014/04/24 职场文书
医院信息公开实施方案
2014/05/09 职场文书
政协会议宣传标语
2014/10/09 职场文书
工作检讨书范文
2015/01/23 职场文书
信访维稳承诺书
2015/05/04 职场文书
新教师教学工作总结
2015/08/14 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
JS数组去重详情
2021/11/07 Javascript
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP