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,一经查实,立即删除!

相关文章

ember.js_如何设置基本的Ember.js应用

ember.jsby Tracy Lee | ladyleet特雷西李(Tracy Lee)| Ladyleet 如何设置基本的Ember.js应用 (How to set up a Basic Ember.js app) So, you want to test out Ember, eh? This article will walk through building a basic app.所以&#xff0c;您想测试Ember&#xff0c;…

分数转小数C语言,这是把小数转换成分数的程序,可是输入0.6666无限循环

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼#include int main(){double a;scanf("%lf", &a);输入小数int b, c 0, d 0;double b1 a;do{b1 *10;b (int)b1;printf("%d\n", b);if(b%10!0){c;if(d>0){c d;d 0;}}else{d;}}while(d<5);printf("…

arm处理器的历史及现状

1 arm处理器的发展历史 arm1 arm2 arm3 arm6 arm7 arm9 arm11 arm cortex 2 arm处理器现状 arm cortex A a即application&#xff0c;即应用处理器&#xff0c;主要用在智能手机、平板电脑和服务器上。 arm cortex M m即mcu&#xff0c;即单片机上的处理器&#xff0c;它的特点…

Linq常用List操作总结,ForEach、分页、交并集、去重、SelectMany等

1 /*2 以下围绕Person类实现&#xff0c;Person类只有Name和Age两个属性3 一.List<T>排序4 1.1 List<T>提供了很多排序方法&#xff0c;sort(),Orderby(),OrderByDescending().5 */6 7 lstPerson lstPerson.OrderByDescending(x>x.Name).ToList(); //降序8 ls…

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

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

加密算法—MD5、RSA、DES

最近因为要做一个加密的功能&#xff0c;简单了解了一下加密算法&#xff0c;现在比较常用的有三个加密算法MD5加密算法、RSA加密算法、DES加密算法。 MD5加密算法 定义&#xff1a;MD5算法是将任意长度的“字节串”变换成一个128bit的大整数&#xff0c;并且它是一个不可逆的字…

随机加密_随机艺术和加密圣诞树

随机加密When I first learned how to code, one of my first tasks was setting up an SSH key so I could use encryption to securely connect to my friend’s Linux server.当我第一次学习如何编码时&#xff0c;我的第一个任务是设置SSH密钥&#xff0c;以便可以使用加密…

用c语言编写一个2048 游戏,求c语言编写的2048游戏代码,尽量功能完善一些

正在编写中&#xff0c;请稍后&#xff01;追答 : 代码来了&#xff01;有点急&#xff0c;没做界面。追答 : 2048_launcher。c&#xff1a;#include#include#includevoid main(){printf("正在启动中&#xff0c;请稍后&#xff01;");Sleep(1000);system("bin\…

MySQL之数据库对象查看工具mysqlshow

mysqlshow&#xff1a;数据库对象查看工具&#xff0c;用来快速查找存在哪些数据库、数据库中的表、表中的列或索引。选项&#xff1a;--count 显示数据库和表的统计信息-k 显示指定的表中的索引-i 显示表的状态信息不带任何参数显示所有数据库[rootwww mys…

软件工程分组

电子零售系统 陈仔祥 孟拓 陈庚 汪力 郭澳林 崔祥岑 刘校 肖宇 武清 胡圣阳转载于:https://www.cnblogs.com/2231c/p/9960751.html

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

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

使用Kakapo.js进行动态模拟

by zzarcon由zzarcon 使用Kakapo.js进行动态模拟 (Dynamic mocking with Kakapo.js) 3 months after the first commit, Kakapo.js reaches the first release and we are proud to announce that now it is ready to use. Let us introduce you Kakapo.首次提交3个月后&#…

android ble 实现自动连接,Android:自动重新连接BLE设备

经过多次试验和磨难之后,这就是我最好让Android自动连接的唯一用户操作是首先选择设备(如果使用设置菜单然后首先配对).您必须将配对事件捕获到BroadcastReceiver中并执行BluetoothDevice.connectGatt()将autoconnect设置为true.然后当设备断开连接时,调用gatt.connect().更新&…

莱斯 (less)

less中的变量 1、声明变量&#xff1a;变量名&#xff1a;变量值 使用变量名&#xff1a;变量名 less中的变量类型 ①数字类1 10px ②字符串&#xff1a;无引号字符串red和有引号字符串"haha" ③颜色类red#000000 rgb() …

hackintosh黑苹果_如何构建用于编码的Hackintosh

hackintosh黑苹果by Simon Waters西蒙沃特斯(Simon Waters) 如何构建用于编码的Hackintosh (How to build a Hackintosh for coding) Let’s talk about Hackintosh-ing — the installation of Mac OS X on PC hardware.我们来谈谈Hackintosh-ing-在PC硬件上安装Mac OSX。 I…

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

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

android项目编译命令行,命令行编译Android项目

1. 生成R文件> aapt package -f -m -J ./gen -S res -M AndroidManifest.xml -I D:\android.jar-f 如果编译生成的文件已经存在&#xff0c;强制覆盖。-m 使生成的包的目录存放在-J参数指定的目录-J 指定生成的R.java 的输出目录路径-S 指定res文件夹的路径-I 指定某个版本平…

jQuery datepicker和jQuery validator 共用时bug

当我们给一个元素绑定一个datepick后又要对它用validator进行验证时会发现验证并没有成功 因为当点击该元素时候input弹出datepick的UI就已经失去了焦点它验证的仍然是前一个值&#xff0c; 不过还好 datepick提供了onSelect 事件我们可以在这个事件触发的时候重新把焦点在赋给…

《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 …