Vue 框架之动态绑定 css 样式实例分析


Posted in Javascript onNovember 14, 2018

今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分

首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ,也可以实现绑定,但都不是动态绑定,动态绑定肯定是根据用户的某个操作实现动态的修改样式

先看下面的第一个小实例:

Vue 框架之动态绑定 css 样式实例分析

源代码 html 文件:

请看注释

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>VueLearn-cnblogs/xpwi</title>
 <!--引入自定义的样式-->
 <link rel="stylesheet" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
 <!--引入 vue 核心 js-->
 <script type="text/javascript" src="js/vue.js" ></script>
 </head>
 <body>
 <!--vue-app 是根容器,定义一个 id,然后在 js 里操作-->
 <div id="vue-app">
 <h2>动态绑定 css 样式</h2>
 <!--Vue 中绑定 class,使用的是 json 对象,类名:布尔值
 然后我们可以通过修改 布尔值来实现修改样式-->
 <h3 v-bind:class="{red:true}">实例1</h3>
 <h3>实例2</h3> 
 </div>
 <!--引入自己的 js,注意必须写在 body 标签里最后,因为必须先加载你的整个 HTML DOM,才回去执行 vue 实例-->
 <script type="text/javascript" src="js/computed.js" ></script>
 </body>
</html>

源代码 css 文件:

.red{
 color: red;
}
.change{
 background-color: yellow;
}

第二个小实例:

实现,鼠标放上去,修改背景色

Vue 框架之动态绑定 css 样式实例分析

源代码 html 文件:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>VueLearn-cnblogs/xpwi</title>
 <!--引入自定义的样式-->
 <link rel="stylesheet" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
 <!--引入 vue 核心 js-->
 <script type="text/javascript" src="js/vue.js" ></script>
 </head>
 <body>
 <!--vue-app 是根容器,定义一个 id,然后在 js 里操作-->
 <div id="vue-app">
 <h2>动态绑定 css 样式</h2>
 <!--Vue 中绑定 class,使用的是 json 对象,类名:布尔值
 然后我们可以通过修改 布尔值来实现修改样式-->
 <!--dataRed,dataChange是布尔值,定义在js 文件中-->
 <h3 v-on:mouseover="dataChange=!dataChange" v-on:mouseout="dataChange=!dataChange" v-bind:class="{red:dataRed,change:dataChange}">实例1</h3>
 <h3>实例2</h3>
 </div>
 <!--引入自己的 js,注意必须写在 body 标签里最后,因为必须先加载你的整个 HTML DOM,才回去执行 vue 实例-->
 <script type="text/javascript" src="js/css.js" ></script>
 </body>
</html>

源代码 js 文件:

//实例化 vue 对象
new Vue({
 //注意代码格式
 //el:element 需要获取的元素,一定是 html 中的根容器元素
 el:"#vue-app",
 data:{
 dataRed : true,
 dataChange : false
 },
 methods:{
 }
});

源代码 css 文件:

.red{
 color: red;
}
.change{
 background-color: yellow;
}

上面的动态,大家可以看到是通过修改样式的 打开和关闭

实例二:

Vue 框架之动态绑定 css 样式实例分析

源代码 html 文件:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>VueLearn-cnblogs/xpwi</title>
 <!--引入自定义的样式-->
 <link rel="stylesheet" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
 <!--引入 vue 核心 js-->
 <script type="text/javascript" src="js/vue.js" ></script>
 </head>
 <body>
 <!--vue-app 是根容器,定义一个 id,然后在 js 里操作-->
 <div id="vue-app">
 <h2>动态绑定 css 样式</h2>
 <!--Vue 中绑定 class,使用的是 json 对象,类名:布尔值
 然后我们可以通过修改 布尔值来实现修改样式-->
 <!--dataRed,dataChange是布尔值,定义在js 文件中-->
 <h3 v-on:mouseover="dataChange=!dataChange" v-on:mouseout="dataChange=!dataChange" v-bind:class="{red:dataRed,change:dataChange}">实例1</h3>
 <h3 v-on:mouseover="changeHeight=!changeHeight" v-on:mouseout="changeHeight=!changeHeight" v-bind:class="{yellowBG:true,changeHeight:changeHeight}">实例2</h3>
 </div>
 <!--引入自己的 js,注意必须写在 body 标签里最后,因为必须先加载你的整个 HTML DOM,才回去执行 vue 实例-->
 <script type="text/javascript" src="js/css.js" ></script>
 </body>
</html>

源代码 js 文件:

//实例化 vue 对象
new Vue({
 //注意代码格式
 //el:element 需要获取的元素,一定是 html 中的根容器元素
 el:"#vue-app",
 data:{
 dataRed : true,
 dataChange : false,
 changeHeight : false
 },
 methods:{
 }
});

源代码 css 文件:

.red{
 color: red;
}
.change{
 background-color: yellow;
}
.yellowBG{
 width: 20%;
 background-color: yellow;
}
.changeHeight{
 width: 20%;
 height:100px
}

总结

以上所述是小编给大家介绍的Vue 框架之动态绑定 css 样式实例分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
javaScript函数中执行C#代码中的函数方法总结
Aug 07 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 #Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 #Javascript
Vue源码探究之状态初始化
Nov 14 #Javascript
vue使用laydate时间插件的方法
Nov 14 #Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 #Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 #Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 #Javascript
You might like
php 使用post,get的一种简洁方式
2010/04/25 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
js控制frameSet示例
2013/09/10 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
js导出txt示例代码
2014/01/14 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
浅谈Vue.js
2017/03/02 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
详解pandas赋值失败问题解决
2020/11/29 Python
P/Invoke是什么
2015/07/31 面试题
急诊科护士自我鉴定
2013/10/14 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
找规律教学反思
2016/02/23 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python