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 相关文章推荐
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 07 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的字符串用法小结
2010/06/08 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
告诉大家什么是JSON
2008/06/10 Javascript
Javascript 继承机制实例
2009/08/12 Javascript
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
Postman的下载及安装教程详解
2018/10/16 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
Python continue语句用法实例
2014/03/11 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
Python logging模块用法示例
2018/08/28 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
春节请假条
2014/04/11 职场文书
车间核算员岗位职责
2014/07/01 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
教师党员自我评价2015
2015/03/04 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技