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 相关文章推荐
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
JavaScript的继承实现小结
May 07 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
js CSS3实现卡牌旋转切换效果
Jul 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
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
在vue项目中使用sass语法问题
2019/07/18 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
django 发送手机验证码的示例代码
2018/04/25 Python
Python中字符串List按照长度排序
2019/07/01 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
python画图常规设置方式
2020/03/05 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
python 读取、写入txt文件的示例
2020/09/27 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
聚美优品恶搞广告词
2014/03/14 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
校园广播站开场白
2015/06/01 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题