Vue 框架-05-动态绑定 css 样式

Vue 框架-05-动态绑定 css 样式

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

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

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

在这里插入图片描述

源代码 html 文件:
请看注释

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>VueLearn-cnblogs/xpwi</title><!--引入自定义的样式--><link rel="stylesheet" href="css/style.css" /><!--引入 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;
}

第二个小实例:
实现,鼠标放上去,修改背景色

在这里插入图片描述

源代码 html 文件:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>VueLearn-cnblogs/xpwi</title><!--引入自定义的样式--><link rel="stylesheet" href="css/style.css" /><!--引入 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;
}

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

实例二:

在这里插入图片描述

源代码 html 文件:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>VueLearn-cnblogs/xpwi</title><!--引入自定义的样式--><link rel="stylesheet" href="css/style.css" /><!--引入 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
}

转载于:https://www.cnblogs.com/xpwi/p/9955643.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/396061.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

bool查询原理 es_ES系列之原理copy_to用好了这么香

写在前面Elasticsearch(以下简称ES)有个copy_to的功能&#xff0c;之前在一个项目中用到&#xff0c;感觉像是发现了一个神器。这个东西并不是像有些人说的是个语法糖。它用好了不但能提高检索的效率&#xff0c;还可以简化查询语句。基本用法介绍直接上示例。先看看mapping&am…

vnr光学识别怎么打开_干货|指纹锁的指纹识别模块的前世今生,智能锁的指纹识别到底有多智能?...

智能锁现在也有很多叫法&#xff1a;指纹锁、电子锁。可见指纹识别是智能锁的核心功能了&#xff0c;那我们今天来聊聊智能锁的指纹识别模块。指纹识别的历史指纹识别认证的流程指纹识别技术的种类指纹识别的历史早在2000多年前我国古代的人就将指纹用于签订合同和破案了&#…

hide show vue 动画_(Vue动效)7.Vue中动画封装

关键词&#xff1a;动画封装——进行可复用一、如何封装&#xff1f;1、使用&#xff1a;局部组件传递数据局部组件中使用JS动画2、原理&#xff1a;将动画效果完全第封装在一个名为<fade>的组件中&#xff0c;今后如要复用&#xff0c;只需要复制有其组件名的部分&#…

《Python地理数据处理》——导读

前言本书可以帮助你学习使用地理空间数据的基础知识&#xff0c;主要是使用GDAL / OGR。当然&#xff0c;还有其他选择&#xff0c;但其中一些都是建立在GDAL的基础之上&#xff0c;所以如果你理解了本书中的内容&#xff0c;就可以很轻松地学习其他知识。这不是一本关于地理信…

记一次Java AES 加解密 对应C# AES加解密 的一波三折

最近在跟三方对接 对方采用AES加解密 作为一个资深neter Ctrl CV 是我最大的优点 所以我义正言辞的问他们要了demo java demo代码&#xff1a; public class EncryptDecryptTool {private static final String defaultCharset "UTF-8";private static final String …

zemax评价函数编辑器_ZEMAX与光学设计案例:激光扩束系统详细设计与公差分析(二)...

目前超过两千人的光学与光学设计方面的微信公众号&#xff0c;欢迎您的到来&#xff01;激光扩束系统公差分析ZEMAX与光学设计案例&#xff1a;激光扩束系统详细设计与公差分析(二)作者&#xff1a;墨子川上10倍扩束系统在上篇已经设计好了&#xff0c;接下来就是进行系统的公差…

UiPath: Selectors repair 选择器的修复,即被选择的按钮发生改变如何选择第二按钮...

实现批量注册用户功能时&#xff0c;出现第一个用户注册完时&#xff0c;弹出确认按钮&#xff0c;点击即可&#xff0c;但是第二个用户注册完成时&#xff0c;弹出的按钮与第一个有差异&#xff0c;图形用户界面元素及其父元素的属性都发生改变。所以就点不了按钮&#xff0c;…

《C专家编程》一1.6 它很棒,但它符合标准吗

本节书摘来自异步社区《C专家编程》一书中的第1章&#xff0c;第1.6节&#xff0c;作者 【美】Perter Van Der Linde&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看 1.6 它很棒&#xff0c;但它符合标准吗 不要添乱——立即解散ISO工作小组。 ——匿名人士 …

abap al设置单元格可编辑 oo_excel表格操作: 图形和图表编辑技巧汇总(二)

1. 快速选取图表元素图表创建好以后&#xff0c;我们还需要对某些图表元素进行编辑和格式化。图表区包括整个图表和它的全部元素&#xff0c;当你选取图表区后&#xff0c;你就可以看到8个黑色小方块。要想调整单个的图表对象&#xff0c;首先必须选取该对象&#xff0c;然后更…

我的北航故事

我的北航故事 致 沙航的我 既然是故事&#xff0c;那就一定少不了我们耳熟能详的时间&#xff0c;地点&#xff0c;人物&#xff0c;事件&#xff0c;发展&#xff0c;高潮&#xff0c;结局。经过反复的琢磨&#xff0c;我觉得还是写成日记形式比较适合&#xff0c;一是为了掩盖…

CDB和PDB的创建、连接、启动、关闭

CDB和PDB的创建、连接、启动、关闭 一、CDB和PDB基本管理 基本概念&#xff1a; Multitenant Environment&#xff1a;多租户环境 CDB&#xff08;Container Database&#xff09;&#xff1a;数据库容器 PD&#xff08;Pluggable Database&#xff09;&#xff1a;可插拔数据库…

控制usb扫码枪_无线也可以很牢靠-世达SATA热熔胶枪评测

作为一名喜欢动手制作的手工达人&#xff0c;往往乐趣就在于动手过程中的成就感。而在对零件进行固定时&#xff0c;热熔胶由于可以包裹裸露的电线线头&#xff0c;固定效果也非常好&#xff0c;相比电焊也更加的简单易操作&#xff0c;因而被很多人选择。但是&#xff0c;多数…

Anaconda管理多版本的python环境

通过Conda的环境管理功能&#xff0c;我们能同时安装多个不同版本的Python&#xff0c;并能根据需要自由切换。下面我将给大家分享一下&#xff0c;新增Python版本&#xff0c;切换&#xff0c;再切回主版本的详细过程。 方法/步骤 1首先确保你的系统里已经安装了Conda&#xf…

父子沪c转大牌过户_机动车异地过户(转籍)

最近我家换了一辆车&#xff0c;导航后台数据统计是去足浴城最多的车主&#xff0c;尬&#xff01;从想起这个品牌到付定金&#xff0c;也就半天时间&#xff0c;买之前没了解这么透彻。不过&#xff0c;到手驾驶&#xff0c;还是比之前的车舒适很多的&#xff0c;就是容易在不…

android安卓系统2.3 使用说明书,Android2.3操作界面

Android2.3操作界面摩托罗拉XT882的界面相对于原生的Gingerbread还是有了不小的变化&#xff0c;首先最大的感觉就是主色调亮了很多。默认背景在qHD分辨率下非常的清晰&#xff0c;同时整个界面仍然采用了多分屏界面。下方由中国电信定制&#xff0c;状态栏加入了全新的单个状态…

Linux 下 nginx反向代理与负载均衡

前面几篇记录下nginx的基本运功&#xff0c;代理服务器的访问&#xff0c;这里来试验下nginx的反向代理。 反向代理&#xff08;Reverse Proxy&#xff09;方式是指以代理服务器来接受internet上的连接请求&#xff0c;然后将请求转发给内部网络上的服务器&#xff0c;并将从服…

android 8.1没声音,Android 8.1重大改变!耳机孔不见了

原标题&#xff1a;Android 8.1重大改变&#xff01;耳机孔不见了今天上午&#xff0c;Android Police爆料称&#xff0c;下一代的Pixel 2将首发Android 8.1。更重要的是&#xff0c;在这个新系统中&#xff0c;谷歌已经做好了放弃3.5mm耳机插口的准备&#xff0c;并将在底层优…

Leetcode:0002(两数之和)

LeetCode&#xff1a;0002&#xff08;两数之和&#xff09; 题目描述&#xff1a;给定两个非空链表来表示两个非负整数。位数按照逆序方式存储&#xff0c;它们的每个节点只存储单个数字。将两数相加返回一个新的链表。你可以假设除了数字 0 之外&#xff0c;这两个数字都不会…

《Excel 职场手册:260招菜鸟变达人》一第 13 招 利用数据验证给单元格添加注释,不用批注...

本节书摘来异步社区《Excel 职场手册&#xff1a;260招菜鸟变达人》一书中的第1章&#xff0c;第13节&#xff0c;作者&#xff1a; 聂春霞 , 佛山小老鼠 责编&#xff1a; 王峰松&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看。 第 13 招 利用数据验证给单…

《机器人学经典教程》——2.2 控制论

本节书摘来异步社区《机器人学经典教程》一书中的第2章&#xff0c;第2.2节&#xff0c;作者&#xff1a;【美】Maja J. Matarić&#xff08;马娅•马塔里奇&#xff09;&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.2 控制论 随着控制理论的不断发展…