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之AJAX框架使用说明
Apr 24 Javascript
jQuery参数列表集合
Apr 06 Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
javascript动画算法实例分析
Jul 31 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
关于React Native使用axios进行网络请求的方法
Aug 02 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 str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
php判断是否为json格式的方法
2014/03/04 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
php生出随机字符串
2017/07/06 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
Python登录系统界面实现详解
2019/06/25 Python
python多进程并发demo实例解析
2019/12/13 Python
通过自学python能找到工作吗
2020/06/21 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
DNA测试:Orig3n
2019/03/01 全球购物
普天C++笔试题
2016/03/20 面试题
小学生班干部竞选稿
2015/11/20 职场文书
canvas实现贪食蛇的实践
2022/02/15 Javascript
mysql幻读详解实例以及解决办法
2022/06/16 MySQL