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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
jQuery的学习步骤
Feb 23 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
jquery处理json对象
Nov 03 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
JS如何监听div的resize事件详解
Dec 03 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 管理系统程序中的后门
2009/08/05 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
jquery 简单导航实现代码
2009/09/11 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
Python装饰器的函数式编程详解
2015/02/27 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
英国袜子店:Sock Shop
2017/01/11 全球购物
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
奥巴马演讲稿
2014/01/08 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
十八大演讲稿
2014/05/22 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
go web 预防跨站脚本的实现方式
2021/06/11 Golang
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
用Python可视化新冠疫情数据
2022/01/18 Python