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下attr和removeAttr的使用方法
Dec 28 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
javascript模块化简单解析
Apr 07 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
jquery实现拖动效果
Aug 10 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
JavaScript常用工具函数大全
May 06 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中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
Python交互环境下实现输入代码
2018/06/22 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
应届医学毕业生求职信分享
2013/12/02 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
自荐信如何制作?
2014/02/21 职场文书
护士找工作求职信
2014/07/02 职场文书
房屋产权证明书
2015/06/19 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书