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 相关文章推荐
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 Javascript
JS实现商品橱窗特效
Jan 09 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
PHP数字格式化
2006/12/06 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
Python版的文曲星猜数字游戏代码
2013/09/02 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
Python简单基础小程序的实例代码
2019/04/28 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
Python如何使用函数做字典的值
2019/11/30 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
优秀班集体先进事迹材料
2014/05/28 职场文书
海洋科学专业求职信
2014/08/10 职场文书
怎么写工作检讨书
2014/11/16 职场文书
实习推荐信格式模板
2015/03/27 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
感恩老师主题班会
2015/08/12 职场文书
导游词之永泰公主墓
2019/12/04 职场文书